首先,什么是scroll,scroll就是用来获得滚动长度的:
scroll也是同理,但是它的写法有如下规则:
谷歌浏览器 和没有声明 DTD <DOCTYPE > :
document.body.scrollTop;
火狐 和其他浏览器
document.documentElement.scrollTop;
ie9+ 和 最新浏览器 都认识
window.pageXOffset; pageYOffset (scrollTop)
我们调用一次,只能获得当前的滚动长度,不能实时监控,所以就要加一个window事件:
window.onscroll = function() { 页面滚动语句 }
兼容写法:
var scrollTop = window.pageYOffset || document.documentElement.scrollTop
|| document.body.scrollTop || 0;
封装写法:
<script>
// var json = {left: 10, right: 10} 变异
//json.left json.top
function scroll() {
if(window.pageYOffset != null) // ie9+ 和其他浏览器
{
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if(document.compatMode == "CSS1Compat") // 声明的了 DTD
// 检测是不是怪异模式的浏览器 -- 就是没有 声明<!DOCTYPE html>
{
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return { // 剩下的肯定是怪异模式的
left: document.body.scrollLeft,
top: document.body.scrollTop
}
}
window.onscroll = function() {
console.log(scroll().top);
}
</script>
这样,scroll().top,scroll().left就各自是相应的长度。