本文摘自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>
|
阅读剩余部分
相关阅读 >>
javascript数组怎么删除项(元素)
javascript中怎么将json对象转为字符串
js怎么设置元素css样式
javascript怎样验证手机号码
echarts-基于html5 canvas的javascript图表库图文详解
react可以引入css吗?
react和javascript有什么关系
javascript是动态的吗
vue.js方法与事件的介绍
javascript如何改变文本内容
更多相关阅读请进入《javascript》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » javascript怎么设置滚动条高度