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