1.查看滚动条的滚动距离
document.body.scrollLeft与document.documentElement.scrollLeft是冲突的，一个有值另一个的值就为0，
▲兼容性比较混乱，同时取两个值相加，因为不可能存在两个同时有值
so最兼容的写法就是document.body.scrollLeft+document.documentElement.scrollLeft
window.pageXOffset/pageYOffset IE8/IE8以下都不兼容,IE9以上才兼容
举个例子：封装兼容性方法，求滚轮滚动离aa()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> D </head> <body> <div style=" 10000px; height: 23000px; background-color: #ddd;"></div> <script type="text/javascript"> function aa() { //0 && window.pageXoffset代表失效,else是验证IE9以下 if ( window.pageXOffset) { return { x: window.pageXOffset, y: window.pageYOffset } } else { return { x: document.body.scrollLeft + document.documentElement.scrollLeft,//二者只显示一个 y: document.body.scrollTop + document.documentElement.scrollTop } } } </script> </body> </html>
效果图：
2.视口尺寸
window.innerWidth/innerHeight IE8/IE8以下都不兼容
document.documentElement.clientWidth/clientHeight 标准模式下，任何浏览器都兼容
document.body.clientWidth/clientHeight 适用于怪异模式下的浏览器(当html页面没有声明（<!DOCTYPE html>）是就是怪异模式)
举个例子：
封装兼容性方法，返回浏览器视口尺寸aa()