当子元素尺寸超过父元素的时候能够出现滚动条。
可能会根据需要将滚动条定位到某处，蚂蚁部落的侧栏导航就具有类似功能。
下面通过代码实例简单演示一下简单定位效果：[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 一章节。
