div中打开滚动条与设置滚动条位置
当我们给div设置固定的高度或宽度的时候,超出的内容默认是不显示的.但是我们有将他们显示出来的需求,比如自己做一个,这时候我们就需要给div加上滚动条了
一、给div设置滚动条
我们只需要这么一行css代码
overflow: scroll;
如果我们只想添加高度滚动条,我们可以使用下面的语句
/*设置纵向滚动栏*/
overflow-x: scroll;
/*设置横向滚动栏*/
overflow-y: scroll;
当然,我们可以给值设置成 auto,让其在超出的时候才显示滚动条,这才是我们常用的效果吧
<!-- 当纵向元素超过div的大小时显示滚动条 -->
<div style="height:400px;overflow-x: auto">
.........
</div>
二、设置滚动条的位置
-
通过锚点跳转
给内部的元素设置id属性,然后通过 #id 来跳转到对应位置实现滚动条滚动 location = "#id";//跳转到id对应的位置 <a href="#id">滚动</a>
-
设置scrollTop的值
跳转到对应位置 //滚动条滚到100的位置 document.getElementById("div").scrollTop = 100; //滚动条直接滚动到底部 let div = document.getElementById("div"); div.scrollTop = div.scrollHeight; **注意**: 如果使用jQuery获取元素需要转为js对象 如 $("#div")[0].scrollTop = 100;