当我们用鼠标滚轮，滚动网页的时候，会触发 window.onscroll() 方法。效果如下：（注意看控制台的打印结果）
如果你需要做滚动监听，可以使用这个方法。
我们来看看和 scroll 相关的有哪些属性。
ScrollWidth 和 scrollHeight：获取元素整个滚动区域的宽、高。包括 width 和 padding，不包括 border和margin。
注意：
scrollHeight 的特点是：如果内容超出了盒子，scrollHeight为内容的高（包括超出的内容）；如果不超出，scrollHeight为盒子本身的高度。ScrollWidth同理。
打印结果：
实战经验：
当某个元素满足scrollHeight - scrollTop == clientHeight时，说明垂直滚动条滚动到底了。
当某个元素满足scrollWidth - scrollLeft == clientWidth时，说明水平滚动条滚动到底了。
这个实战经验非常有用，可以用来判断用户是否已经将内容滑动到底了。比如说，有些场景下，希望用户能够看完“长长的活动规则”，才允许触发接下来的表单操作。
如果要获取页面滚动的距离，scrollTop 这个属性的写法要注意兼容性，如下。
（1）如果文档没有 DTD 声明，写法为：
在没有 DTD 声明的情况下，要求是这种写法，chrome浏览器才能认出来。
（2）如果文档有 DTD 声明，写法为：
在有 DTD 声明的情况下，要求是这种写法，IE6、7、8才能认出来。
综合上面这两个，就诞生了一种兼容性的写法：
另外还有一种兼容性的写法：window.pageYOffset 和 window.pageXOffset。这种写法无视DTD的声明。这种写法支持的浏览器版本是：火狐/谷歌/ie9+。
综合上面的几种写法，为了兼容，不管有没有DTD，最终版的兼容性写法：
方法如下：
这里，我们将 scrollTop 和 scrollLeft 封装为一个方法，名叫scroll()，返回值为 一个对象。以后就直接调用scroll().top 和 scroll().left就好。
代码实现：
上方代码中，函数定义的那部分就是要封装的代码。
另外还有一种比较麻烦的封装方式：（仅供参考）
获取title、body、head、html标签的方法如下：
document.documentElement （这个很重要）。
document.documentElement表示文档的html标签。也就是说，基本结构当中的 html 标签而是通过document.documentElement访问的，并不是通过 document.html 去访问的。
完整版代码实现：
（1）index.html：
上方代码中，有一个技巧：
仔细看注释就好。
（2）tools.js：
实现效果：
工程文件：
2018-02-03-scrollTop固定导航栏.rar
缓慢动画里，我们要用到三个函数，这里先列出来：
缓动动画的原理就是：在移动的过程中，步长越来越小。
设置步长为：目标位置和盒子当前位置的十分之一。用公式表达，即：
代码举例：
效果：
缓慢动画的封装（解决四舍五入的问题）
我们发现一个问题，上图中的盒子最终并没有到达400px的位置，而是只到了396.04px就停住了：
原因是：JS在取整的运算时，进行了四舍五入。
我们把打印396.04px这个left值打印出来看看：
我么发现，通过div.style.left获取的值是精确的，通过div.offsetLeft获取的left值会进行四舍五入。
此时，我们就要用到取整的函数了。
通过对缓动动画进行封装，完整版的代码实现如下：
实现效果：
（1）index.html：
（2）tools.js:
实现效果：
小火箭的图片资源：
想学习代码之外的技能？不妨关注我的微信公众号：千古壹号（id：qianguyihao）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
