网页中默认的滚动条到底是哪个元素的? body?html?😵
测试
打印输出各大游览器 body 和 html 标签的 scrollTop 属性
chrome
firefox
ie11
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