一：DOM基本操作：
- 查看滚动条的滚动距离
-
- window.pageXOffset/pageYOffset
-
- IE8及以下不兼容(只有IE9以上的浏览器能用)
-
- document.body/documentElement.scrollTop
-
- 兼容性比较混乱，用时取两个值相加，因为不可能存在两个相同的值（但凡document.body.scrollLeft/Top有值，document.documentElement.scrollLeft/Top一定就是0）
-
- window.pageXOffset/pageYOffset
-
纵向滚动条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script type="text/javascript">
</script>
</body>
</html>
现在window.pageYOffset是0，因为咱们还是在第一页，没有滚动到下面。
咱滚动一点试试：
横向滚动条：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<hr style="widows: 10000px;">
<script type="text/javascript">
</script>
</body>
</html>
练习39：
封装兼容性方法，求滚动轮距离getScrollOffset()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>abraham</title>
</head>
<body>
<hr style="width: 10000px;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<script type="text/javascript">
function getScrollOffset() {
if(window.pageXOffset){
return {
x : window.pageXOffset,
y : window.pageYOffset
}
}else{
return {
x : document.body.scrollLeft + document.documentElement.scrollLeft,
y : document.body.scrollLeft + document.documentElement.scrollTop
}
}
}
</script>
</body>
</html>
