1.查看滚动条的滚动距离
window.pageXOffset
屏幕的右侧，举例网页的左侧有多少像素
window.pageYOffset
屏幕的底端，距离网页的顶端有多少像素
不足：IE9和IE9以下不兼容
IE9以下如何获取滚动像素？
document.body.scrollLeft
document.body.scrollTop
document.documentElement.scrollLeft
document.documentElement.scrollTop
document.body和document.documentElement兼容性比较混乱，
当document.body能获取的时候document.documentElement肯定为0，
当document.documentElement能获取的时候，document.body肯定为0
所以在使用的时候经常这么来用：
document.body.scrollLeft + document.documentElement.scrollLeft
小练习：封装一个getScrollOffset()方法解决兼容性问题，使所有版本浏览器都支持。
//兼容版 求浏览器滚动条滚动距离
function getScrollOffset() {
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,
}
}
}
2.查看可视窗口的尺寸（像素）
window.innerWidth / window.innerHeight
可以查看屏幕当前可视的像素，并非屏幕大小。
不足：IE9以下不兼容
document.documentElement.clientWidth
document.documentElement.clientHeight
标准模式下，任意浏览器都支持。
document.body.clientWidth
document.body.clientHeight
适用于怪异模式下的浏览器
（比如说h5的文档，把文档类型声明删除掉就是怪异模式...）
封装一个方法，返回浏览器可视化窗口尺寸getViewportOffset(),解决兼容性问题。
function getViewportOffset() {
if(window.innerWidth) {
return {
w : window.innerWidth,
h : window.innerHeight
}
}else {
if(document.compatMode === 'BackCompat'){
w : document.body.clientWidth;
h : document.body.clientHeight
} else {
return {
w : document.documentElement.clientWidth,
h : document.documentElement.clientHeight
}
}
}
}
查看元素的宽高
dom.offsetWidth
dom.offsetHeight
<style type="text/css">
#only{
background-color: red;
width: 100px;
height: 100px;
}
</style>
<body>
<div id="only"></div>
<script type="text/javascript">
var div = document.getElementsByTagName('div')[0];
</script>
</body>
控制台测试：
可以获取元素的宽高。
查看元素的位置
dom.offsetLeft , dom.offsetTop
返回相对于与自己最近的有定位的父级元素的位置信息，
如果没有定位的父级元素，则相对于body的坐标。
返回最近的有定位的父级
dom.offsetParent
返回最近的有定位的父级，如果没有，返回body，body.offsetParent返回null
让滚动条滚动
widow上的三个方法
scroll(x,y),scrollTo(x,y)
这两个方法效果一样，小括号里填写的参数为xy为x轴和y轴，要滚到到多少像素的地方
scrollBy(x，y)
小括号里填写的参数为xy为x轴和y轴，要滚动多少像素。填写负数为反方向。