js是滚动条滑到固定位置_JavaScript 滚动条定位指定位置

当子元素尺寸超过父元素的时候能够出现滚动条。

可能会根据需要将滚动条定位到某处，蚂蚁部落的侧栏导航就具有类似功能。

下面通过代码实例简单演示一下简单定位效果：[HTML] 纯文本查看 复制代码运行代码

蚂蚁部落

#box{

width: 150px;

height: 80px;

border: 2px dotted green;

overflow: auto;

position: relative;

}

ul {

list-style-type: none;

font-size :12px;

margin: 0px;

}

window.onload =()=> {

let oBox = document.getElementById("box");

let lis= oBox.getElementsByTagName("li");

lis[3].style.color = "red";

let top = lis[3].offsetTop;

oBox.scrollTop = top;

}

• 蚂蚁部落一
• 蚂蚁部落二
• 蚂蚁部落三
• 蚂蚁部落四
• 蚂蚁部落五
• 蚂蚁部落六
• 蚂蚁部落七
• 蚂蚁部落八
• 蚂蚁部落九
• 蚂蚁部落十

代码运行效果截图如下：

代码分析如下：

(1).上述代码可以将滚动条定位到第四个 li 元素。

(2).其实就是内容向上规定指定距离，此距离是第四个 li 默认情况下距离 box顶部的距离。

(3).let top = lis[3].offsetTop，通过 offsetTop 属性获取这个距离。

(4).box 需要是定位元素。

(5).oBox.scrollTop = top 向上滚动这个尺寸即可。

相关阅读：

(1).offsetTop 参阅 JavaScript offsetTop 一章节。

(2).scrollTop 参阅 JavaScript scrollTop 一章节。