JavaScript Scroll家族以及封装
- scrollTop & scrollLeft 别卷去的值,就是当滑动滚轮浏览网页的时候,网页隐藏在屏幕上方或左侧的距离
-
获得scrollTop 或者 scrollLeft的值有三种方式
- 支持谷歌浏览器和没有声明
<!DOCTYPE html>:document.body.scrollTop - 支持火狐和其它浏览器: document.documentElement.scrollTop
- 支持ie9+ 和 最新浏览器 : window.pageXOffset
- 支持谷歌浏览器和没有声明
-
兼容写法
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
- 封装自己的scroll
function scroll() {
// 获取scrollTop 和 scrollLeft有三种方式
// 1.ie9+ 以及其他新的浏览器支持的 --> window.pageXOffset window.pageYOffset
// 2.谷歌浏览器和没有声明<!DOCTYPE html>的 --> document.body.scrollLeft document.body.scrollTop
// 3.火狐和其他浏览器支持的 --> document.documentElement.offsetLeft document.documentElement.offsetTop
if(window.pageXOffset != null) { // ie9+ 以及其他新浏览器
return {left : window.pageXOffset, top : window.pageYOffset};
} else if(document.compatMode == "CSS1Compat") { // 声明了<!DOCTYPE html>
return {left : document.documentElement.offsetLeft, top : document.documentElement.offsetTop};
} else { // 剩下的怪异浏览器
return {left : document.body.offsetLeft, top : document.body.offsetTop};
}
}