Bootstrap

div中打开滚动条与设置滚动条位置


当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了

一、给div设置滚动条

我们只需要这么一行css代码

overflow: scroll;

如果我们只想添加高度滚动条,我们可以使用下面的语句

/*设置纵向滚动栏*/
overflow-x: scroll;
/*设置横向滚动栏*/
overflow-y: scroll;

当然,我们可以给值设置成 auto,让其在超出的时候才显示滚动条,这才是我们常用的效果吧

<!-- 当纵向元素超过div的大小时显示滚动条 -->
<div style="height:400px;overflow-x: auto">
	.........
</div>

二、设置滚动条的位置

  1. 通过锚点跳转

    给内部的元素设置id属性,然后通过 #id 来跳转到对应位置实现滚动条滚动
    	location = "#id";//跳转到id对应的位置
    	<a href="#id">滚动</a>
    
  2. 设置scrollTop的值

    跳转到对应位置
    	//滚动条滚到100的位置
    	document.getElementById("div").scrollTop = 100;
    	
    	//滚动条直接滚动到底部
    	let div = document.getElementById("div");
    	div.scrollTop = div.scrollHeight;
    	
    	**注意**: 如果使用jQuery获取元素需要转为js对象 
    	如   $("#div")[0].scrollTop = 100;
    

悦读

道可道,非常道;名可名,非常名。 无名,天地之始,有名,万物之母。 故常无欲,以观其妙,常有欲,以观其徼。 此两者,同出而异名,同谓之玄,玄之又玄,众妙之门。

;