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;