开始之前,需要分清楚scrollTo
和scrollTop
坑one
1.设置浏览器scrollTop
最好通过用户操作设置滚动,或者setTimeout延时滚动
window.scrollTo(x, y);
可查看MDN说明。
2.设置元素scrollTop
<script>
let obox = document.getElementById("box");
obox.scrollTo(0, 100);
</script>
坑two
1.获取浏览器scrollTop值
<script>
var scroll_top = document.documentElement.scrollTop;
console.log(scroll_top);
</script>
<script>
var scroll_top = document.body.scrollTop;
console.log(scroll_top);
</script>
这里Chrome和Safari获取元素到滚动条的高度主要区别在于:
document.documentElement.scrollTop
还是document.body.scrollTop
2.获取元素scrollTop值
<script>
window.onload = function () {
let obox = document.getElementById("box");
obox.scrollTo(0, 100);
console.log(obox.scrollTop);
}
</script>
总结
获取scrollTop兼容写法:
function getScrollTop() {
var scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scroll_top = document.documentElement.scrollTop;
} else if (document.body) {
scroll_top = document.body.scrollTop;
}
return scroll_top;
}
这样写不适用于刷新后获取,除非通过UA区分是什么浏览器。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)