1024快乐！浅谈scrollTop需要踩的坑

开始之前，需要分清楚scrollTo和scrollTop

坑one

1.设置浏览器scrollTop

最好通过用户操作设置滚动，或者setTimeout延时滚动

// Chrome和Safari用法一样
window.scrollTo(x, y)；

可查看MDN说明。

2.设置元素scrollTop

// Chrome和Safari下效果一样
// 条件：刷新页面
// 效果：元素y轴滚动100
<script>
    let obox = document.getElementById("box");
    obox.scrollTo(0, 100); 
</script>

坑two

1.获取浏览器scrollTop值

// 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>

// 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

2.获取元素scrollTop值

// 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兼容写法：

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区分是什么浏览器。