一、scrollTop,scrollLeft

要获得页面的scrollTop及scrollLeft,在不同的浏览器中是不一样的:

谷歌浏览器和没声明DTD的文档,通过document.body.scrollTop;来获得

火狐和其他浏览器,通过document.documentElement.scrollTop;来获得

ie9+和最新的浏览器 均可以通过window.pageYOffset;来获得

综上,可以封装如下访问方法:

<script>
function scrollJson() {
if(window.pageYOffset != null) {//ie9+及其他浏览器
return {
left: window.pageXOffset,
top: window.pageYOffset
}
}
else if (document.compatMode == "CSS1Compat"){//声明了DTD
return {
left: document.documentElement.scrollLeft,
top: document.documentElement.scrollTop
}
}
return {
left: document.body.scrollLeft,
top: document.body.scrollTop
}
} window.onscroll = function () {
console.log(scrollJson());
}
</script>

二、同理,可以获得可视区域

function clientSize(){
if(window.innerWidth != null) {
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode == "CSS1Compat") {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
05-11 22:19