坑one
scrollTop_4">1.设置浏览器scrollTop
最好通过用户操作设置滚动,或者setTimeout延时滚动
js">// Chrome和Safari用法一样
window.scrollTo(x, y);
可查看MDN说明。
scrollTop_14">2.设置元素scrollTop
js">// Chrome和Safari下效果一样
// 条件:刷新页面
// 效果:元素y轴滚动100
<script>
let obox = document.getElementById("box");
obox.scrollTo(0, 100);
</script>
坑two
scrollTop_27">1.获取浏览器scrollTop值
js">// Chrome下
// 条件1:页面首次刷新或者页面刷新前滚动条在最顶部
// 效果1:输出0
// 条件2:假如页面刷新前滚动条在500处
// 效果2:刷新后输出500
<script>
var scroll_top = document.documentElement.scrollTop;
// 在Chrome下document.body.scrollTop一直为0
console.log(scroll_top);
</script>
js">// Safari下
// 条件1:页面首次刷新或者页面刷新前滚动条在最顶部
// 效果1:输出0
// 条件2:假如页面刷新前滚动条在500处
// 效果2:刷新后输出500
<script>
var scroll_top = document.body.scrollTop;
// 在Safari下document.documentElement.scrollTop一直为0
console.log(scroll_top);
</script>
这里Chrome和Safari获取元素到滚动条的高度主要区别在于:
document.documentElement.scrollTop
还是document.body.scrollTop
scrollTop_61">2.获取元素scrollTop值
js">// Chrome和Safari下效果一样
// 条件:刷新页面
// 效果:元素y轴滚动100,输出100
<script>
window.onload = function () {
let obox = document.getElementById("box");
obox.scrollTo(0, 100);
console.log(obox.scrollTop);// result: 100
}
</script>
总结
获取scrollTop兼容写法:
js">function getScrollTop() {
var scroll_top = 0;
if (document.documentElement && document.documentElement.scrollTop) { //先获取chrome
scroll_top = document.documentElement.scrollTop;
} else if (document.body) {
scroll_top = document.body.scrollTop;
}
return scroll_top;
}
这样写不适用于刷新后获取,除非通过UA区分是什么浏览器。