onsrcoll和scrollTop兼容与实现

对于onscroll事件的支持

各浏览器 document、document.body、document.documentElement 对象的 onscroll 事件的支持存在差别。

所谓的支持性存在差别就是咱们常说的浏览器兼容性问题，就是说，对于不一样浏览器可能不会按照预期触发相应的事件处理函数。

 

	IE6		IE7		IE8		Firfox		Chrome		Safari		Opera
	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S	Q	S
window 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
div 对象	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y	Y
document 对象	N	N	N	N	N	N	Y	Y	Y	Y	Y	Y	N	N
document.body 对象	Y	N	Y	Y	Y	N	N	N	N	N	N	N	Y	Y
document.documentElement 对象	N	Y	N	Y	N	Y	N	N	N	N	N	N	N	N

 

全部浏览器支持window对象和普通Div对象的scroll事件。可是要保证窗口或这是Div中出现滚动条才能触发滚动事件。

IE（S）不支持document对象scroll事件，对于以下代码，IE浏览器下不会有任何输出：

<script type="text/javascript"> window.onload = function() { document.onscroll = function() { document.getElementById("info").innerHTML = 'OK'; }; } </script>
<div id="info" style="height:3000px;"></div>

支持性以下：

	IE6(S) IE8(S) Firefox Chrome Safari	IE6(Q) IE7 IE8(Q) Opera
document.body.onscroll	无内容输出	OK

 

相反，IE浏览器支持document.documentElement对象scroll事件，而对于其余浏览器不会有任何输出：

<script type="text/javascript"> window.onload = function() { document.documentElement.onscroll = function() { document.getElementById("info").innerHTML = 'OK'; }; } </script>
<div id="info" style="height:3000px;"></div>

支持性以下：

	IE6(S) IE7(S) IE8(S)	IE6(Q) IE7 IE8(Q) Opera Firefox Chrome Safari
document.documentElement.onscroll	OK	无内容输出

 

 

可是上述方法都须要浏览器窗口出现滚动条，若是浏览器内部div出现滚动条怎么办？

能够监听鼠标滚动事件：

不一样浏览器有不一样的滚轮事件，主要是两种，onmousewheel（ff不支持）和DOMMouseScroll（只有ff支持）：

if(document.addEventListener){
document.addEventListener(‘DOMMouseScroll’,scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

 

判断鼠标上滑or下滑：

function scrollFunc(e){
        e=e || window.event;          
         if(e.wheelDelta){//IE/Opera/Chrome 
               console.info(e.wheelDelta); 
          }else if(e.detail){//Firefox 
                console.info(e.detail); 
       } 
 }

若是为负数，则是下滑；若是是正数，则是上滑。

 

scrollTop，是已经滚动过的高度，scrollHeight是整个滚动的高度，

从开始到滚动结束 滚动过的高度，包括滚动元素自身的高度。

contentContainer的scrollTop为a，scrollHeight为b。

监听整个网页的滚动事件，正如上面所说的onscroll实现方法，可是要注意保持兼容性。

 

如今咱们重温一下基础知识，不少时候，咱们须要获取body视口高度：在保证完整的<!doctype...声明的前提下，获取body的视口高度为：document.documentElement.clientHeight;

对于要判断div时候滚动到底部，其实只须要判断div已经滚动的 过的距离scrollTop+本身自己的高度offsetHeight是否大于这个div自己的高度：

this.scrollTop+this.offsetHeight>=this.scrollHeight

判断body的滚动条是否滚动 到底部：

window.onscroll=function(){    
    var scrolltop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);     
    if(scrolltop+document.documentElement.clientHeight>=document.documentElement.scrollHeight)
        alert( 'nowbottom' );
};

 

 

更多关于scrollTop的兼容性问题，能够查看：http://www.75team.com/archives/128