本文摘自PHP中文网,作者藏色散人,侵删。
javascript设置滚动条高度的方法:首先获得在当前选中的li前面的节点的高度;然后减去ul高度的一半设置给ul的scrollTop,把滚动条设置在中间位置即可。

本文操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。
JavaScript动态设置滚动条高度
工作中遇到情形如下:一个ul标签,里面有很多li标签,其中有一个代表初始化已选中的<li class="li-on"><li>。
如果ul设置了高度,如下面的ul的style,并且有很多li子标签,那选中的li就被淹没在滚动条下面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <ul id= "ul_module" style= "height:180px; overflow-y:scroll;" >
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>000</li>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>555</li>
<li>666</li>
<li>777</li>
<li>888</li>
<li class = "li-on" >999</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
|
阅读剩余部分
相关阅读 >>
js是什么语言
前端工程师需要掌握哪些知识?
jsp里面怎么写javascript
javascript绑定事件的方法有哪些
详解js中值传递和引用传递的区别
jquery wrap()方法是什么意思
如何从javascript到typescript?
javascript怎么添加元素
分享es2019中值得收藏的8个有用功能
javascript基本数据类型(介绍)
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么设置滚动条高度