网页中默认的滚动条到底是哪个元素的? body?html?😵

测试

打印输出各大游览器 body 和 html 标签的 scrollTop 属性

chrome

chrome
chrome

firefox

firefox
firefox

ie11

ie11
ie11

safari

safari
safari

总结

除去 safari 默认滚动条都是 html 元素的
只有 safari 这个奇葩滚动条是使用 body 元素的
为啥 safari 这个奇葩总会有各种有问题……

优雅的获取页面滚动位置

// IE9+
window.pageYOffset;

// 非 IE
window.scrollY;

// IE8以及以下
document.documentElement.scrollTop;

// 兼容性最好的写法
window.pageYOffset || document.documentElement.scrollTop;

优雅的滚动页面

原生方法(推荐)

// 这俩货是一样的....
window.scrollTo(x, y);

// 相对滚动
window.scrollBy(offsetX, offsetY)

直接赋值(不推荐)

// chrome, ie, 火狐 ...
document.documentElement.scrollTop = 100

// 奇葩 safari
document.body.scrollTop = 500