关于scrollTop的那些事

标签：style   color   ar   strong   sp   问题   on   c   r   

     大家在实际项目中，应该是要经常用到scrollTop的，它表示的是可视窗口距离页面顶部的距离，这个scrollTop是可读写的，所以可以用来做页面滚动。

     但是大家或多或少遇到一些浏览器兼容问题，为什么FF可以用，到chorme下就用不了呢？

     这里就要谈到document.documentElement和document.body了。

     在不声明Doctype的情况下，浏览器默认是混杂模式（Quirks Mode）。而如今我们都是要求自己做标准网页的人，所以我们时刻都要记得声明Doctype，这时候浏览器就是用标准模式（Stranded Mode）进行渲染的，这个时候一般都是用document.documentElement作为查看模式的了。

　　对于scrollTop，实际情况是如何呢？

• 在FF、IE是可以用document.documentElement.scrollTop来获取视口顶部距离文档顶部的高度，或者改变的。
• 在Chorme、Safari下则是用document.body.scrollTop进行读写的

那我们该如何做浏览器兼容呢？

有两种办法：

1. var scrollTop = document.documentElement.scrollTop || document.body.scrollTop  //或是短路语言，返回其中一个真的选项。
2. var scrollTop = document.documentElement.scrollTop + document.body.scrollTop //其中一个有数值，另一个肯定为零，做简单的相加即可得到scrollTop

当然做scrollTop修改的时候，两种模式都一起修改即可。当然追求极致的同学也是可以用 if 语句进行判断选择的。

关于scrollTop的那些事

标签：style   color   ar   strong   sp   问题   on   c   r   

原文地址：http://www.cnblogs.com/YikaJ/p/scrollTop.html