跟DOM一样，BOM其实也是由很多的API组成。 不过对于BOM来说，最痛苦的不是不记得API，而是明明记得这个这个API，却没有考虑到它的兼容性。
之前的文章中讲到了offset系列的属性，他的宽高是由border，padding和width组成的。而它的offsetLeft和offsetTop则是相对于offsetParent的距离。这里的offsetParent指的是子盒子有定位的父级元素，而如果子盒子没有有定位的父级元素，那么它的offsetParent就是body。讲过了offset系列的，就该讲讲scroll系列的了。
首先就来说说scrollWidth和scrollHeight这两个属性分别获取的是元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 100px;
height: 100px;
border: 5px solid red;
padding: 10px;;
}
</style>
</head>
<body>
<div id="box">
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
啦啦啦
</div>
<script>
var box = document.getElementById("box");
console.log(box.scrollHeight);
console.log(box.offsetHeight);
</script>
</body>
</html>
上述代码分别输出了div的scrollHeight和offsetHeight，在控制台中，这两个属性打印的值分别是297和130；第二个值没有问题，他就是盒子上下边框宽加上下内边距加高度后得来的。而第一个值，获取的则是撑开之后的大小。可能对于这个值具体的算法有疑问，不过，在实际开发中一般不会出现有很大的内边距和边框时要你使用scrollHeight值的。所以不必太纠结为什么是这个数值，我们只要知道这个数值是随着内容的改变而改变就好了。scrollHeight值得算法是如果内容区域小于上下内边距加高度，那么它的值就是上下内边距加高度，否则就是内容撑开的高度。scrolltLeft也是同理。
而说完了scrollHeight和scrollLeft之后，就该来说说scrollTop和scrollLeft了，这两个值的用法相同。所以就来说说其中的offsetTop；一般来说，这两个属性都会配上鼠标移动事件来使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box {
width: 100px;
height: 100px;
overflow: auto;
}
</style>
</head>
<body>
<div id="box">
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
老王走了
</div>
<script src="common.js"></script>
<script>
var box = my$("box");
box.onscroll = function () {
console.log(box.scrollTop);
}
</script>
</body>
</html>
上述代码在拉动滚动条的时候执行，输出div的scrollTop。scrollTop显示的是内容区域向上移动的距离。
上面的代码获取的只是那个小的div中的滚动事件，那么如果在页面中呢？我们就可以把整个页面看做是一个div。这时候就遇到一个问题了，页面到底是body呢，还是html呢？其实，不同的浏览器有不同的解析方式。这时候，我们就要封装兼容性代码了。
function scroll() {
return {
scrollLeft:document.body.scrollLeft || document.documentElement.scrollLeft,
scrollTop:document.body.scrollTop || document.documentElement.scrollTop
};
}
在这里，我们封装了一个scroll函数，用来返回一个对象，这个对象有两个属性，这两个属性在调用的时候可以获取页面的滚动距离，并且，如果浏览器是根据body来获取或者根据html来获取他都能兼容。