對(duì)于onscroll事件的支持

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

所謂的支持性存在差異就是我們常說的瀏覽器兼容性問題，就是說，對(duì)于不同瀏覽器可能不會(huì)按照預(yù)期觸發(fā)相應(yīng)的事件處理函數(shù)。

?

?IE6IE7IE8FirfoxChromeSafariOpera?QSQSQSQSQSQSQSwindow 對(duì)象div 對(duì)象document 對(duì)象document.body 對(duì)象document.documentElement 對(duì)象

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對(duì)象和普通Div對(duì)象的scroll事件。但是要保證窗口或這是Div中出現(xiàn)滾動(dòng)條才能觸發(fā)滾動(dòng)事件。

IE（S）不支持document對(duì)象scroll事件，對(duì)于如下代碼，IE瀏覽器下不會(huì)有任何輸出：

<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

無內(nèi)容輸出	OK

?

相反，IE瀏覽器支持document.documentElement對(duì)象scroll事件，而對(duì)于其他瀏覽器不會(huì)有任何輸出：

<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	無內(nèi)容輸出

?

?

但是上述方法都需要瀏覽器窗口出現(xiàn)滾動(dòng)條，如果瀏覽器內(nèi)部div出現(xiàn)滾動(dòng)條怎么辦？

可以監(jiān)聽鼠標(biāo)滾動(dòng)事件：

不同瀏覽器有不同的滾輪事件，主要是兩種，onmousewheel（ff不支持）和DOMMouseScroll（只有ff支持）：

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

?

判斷鼠標(biāo)上滑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); } }

如果為負(fù)數(shù)，則是下滑；如果是正數(shù)，則是上滑。

?

scrollTop，是已經(jīng)滾動(dòng)過的高度，scrollHeight是整個(gè)滾動(dòng)的高度，

從開始到滾動(dòng)結(jié)束 滾動(dòng)過的高度，包括滾動(dòng)元素自身的高度。

contentContainer的scrollTop為a，scrollHeight為b。

監(jiān)聽整個(gè)網(wǎng)頁的滾動(dòng)事件，正如上面所說的onscroll實(shí)現(xiàn)方法，但是要注意保持兼容性。

?

現(xiàn)在我們重溫一下基礎(chǔ)知識(shí)，很多時(shí)候，我們需要獲取body視口高度：在保證完整的<!doctype...聲明的前提下，獲取body的視口高度為：document.documentElement.clientHeight;

對(duì)于要判斷div時(shí)候滾動(dòng)到底部，其實(shí)只需要判斷div已經(jīng)滾動(dòng)的 過的距離scrollTop+自己本身的高度offsetHeight是否大于這個(gè)div本身的高度：

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

判斷body的滾動(dòng)條是否滾動(dòng) 到底部：

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

?

?

更多關(guān)于scrollTop的兼容性問題，可以查看：http://www.75team.com/archives/128

?

轉(zhuǎn)載于:https://www.cnblogs.com/0603ljx/p/4972784.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。