关于滚动高度
来源：2-14 BOM特效开发（1）
lascride
2021-05-25 16:15:55
老师,这句代码可以解释一下吗,为什么滚动高度等于offsetTop,谢谢~
<script>
// Delegation add listener
var list = document.getElementById("list");
list.onclick = function(e) {
if(e.target.tagName.toLowerCase() == "li") {
var n = e.target.getAttribute("data-n");
var contentPart = document.querySelector(".content-part[data-n=" + n + "]");
document.documentElement.scrollTop = contentPart.offsetTop;//不太懂
}
}
</script>
写回答
1回答
-
同学你好，实现该楼层导航效果时，鼠标点击某项菜单，页面需要滚动到相应的位置，也就是滚动条需要滚动相应的距离。
而滚动条滚动的距离，其实就是当前盒子距离父盒子顶部的距离，如图
而offsetTop就是用来获取当前盒子距离父盒子顶部的距离，然后将获取的距离赋值给
document.documentElement.scrollTop（scrollTop为页面滚动高度）实现滚动。
注意：父盒子是指距离元素最近的一个具有定位的祖先元素（position为relative，absolute，fixed），若祖先元素都不符合条件，则offsetParent为body。
如下图所示：获取child的offsetTop，图1的父盒子为father，图2的父盒子为body。
祝学习愉快！
0h021-05-25
相似问题