對于onscroll事件的支持

各瀏覽器 document、document.body、document.documentElement 對象的 onscroll 事件的支持存在差異。

所謂的支持性存在差異就是我們常說的瀏覽器兼容性問題，就是說，對于不同瀏覽器可能不會按照預期觸發相應的事件處理函數。

?

?IE6IE7IE8FirfoxChromeSafariOpera?QSQSQSQSQSQSQSwindow 對象div 對象document 對象document.body 對象document.documentElement 對象

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

Y

N

N

N

N

N

N

Y

Y

Y

Y

Y

Y

N

N

Y

N

Y

Y

Y

N

N

N

N

N

N

N

Y

Y

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 SafariIE6(Q) IE7 IE8(Q) Operadocument.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 Safaridocument.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.οnscrοll=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

?

轉載于:https://www.cnblogs.com/0603ljx/p/4972784.html

總結

以上是生活随笔為你收集整理的onsrcoll和scrollTop兼容与实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。