SD9013: 各瀏覽器對於 document、document.body、document.documentElement 物件的 onscroll 事件的支援存在差異
標準參考
scroll 事件會在文件或一個元素滾動時觸發。
有關 scroll 事件的詳細資料:
問題描述
各瀏覽器 document、document.body、document.documentElement 物件的 onscroll 事件的支援存在差異。
造成的影響
為 document、document.body、document.documentElement 物件繫結 onscroll 事件後在不同瀏覽器中可能不會按預期觸發相應的事件處理函式。
受影響的瀏覽器
所有瀏覽器 |
---|
問題分析
1.各瀏覽器對 document、document.body、document.documentElement 物件的 onscroll 事件支援情況
依次為 window、HTMLDivElement、document、document.body、document.documentElement 物件繫結 scroll 事件監聽器,在觸發滾動條事件後,將訊息打印出來,最終可以彙總為下表:
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 |
2. 所有瀏覽器支援 window 物件的 scroll 事件
分析以下程式碼:
<script type="text/javascript"> window.onscroll = function(){ document.getElementById("info").innerHTML='OK'; }; </script> <div id="info" style="height:3000px;"></div>
- info 的高度設為 3000px,為了讓瀏覽器出現滾動條,這樣才能觸發滾動事件。
- 如果 scroll 事件被觸發,那麼頁面上會出現 "OK" 的文字。
在各瀏覽器下的輸出:(移動滾動條後的截圖)
IE6 IE7 IE8 Firefox Chrome Safari Opera | |
---|---|
window.onscroll | OK |
可見,所有瀏覽器中的 window 物件都支援 scroll 事件。
3. 所有瀏覽器都支援普通 DIV 物件的 scroll 事件
分析以下程式碼:
<script language="javascript"> window.onload = function() { document.getElementById("div1").onscroll = function() { document.getElementById("info").innerHTML = 'OK'; }; } </script> <div id="div1" style="width:100px; height:100px;border:1px solid red; overflow:scroll;"> <div id="info" style="height:3000px; width:20px;background:green;"></div> </div>
- info 的高度設為3000px,為了讓 div1 出現滾動條,這樣才能觸發滾動事件。
- 如果 scroll 事件被觸發,那麼綠色背景的 div1上會出現 "OK" 的文字。
在各瀏覽器下的輸出:(移動滾動條後的截圖)
IE6 IE7 IE8 Firefox Chrome Safari Opera | |
---|---|
DIVElement.onscroll | OK |
可見,所有瀏覽器中的普通 DIV 物件都支援 scroll 事件。
4. 各瀏覽器對 document 物件 scroll 事件的支援
分析以下程式碼:
<script type="text/javascript"> window.onload = function() { document.onscroll = function() { document.getElementById("info").innerHTML = 'OK'; }; } </script> <div id="info" style="height:3000px;"></div>
- info 的高度設為 3000px,為了讓 div1 出現滾動條,這樣才能觸發滾動事件。
- 如果 scroll 事件被觸發,那麼頁面上會出現 "OK" 的文字。
在各瀏覽器下的輸出:(移動滾動條後的截圖)
IE6(S) IE8(S) Firefox Chrome Safari | IE6(Q) IE7 IE8(Q) Opera | |
---|---|---|
document.onscroll | 無內容輸出 | OK |
可見,在IE6(Q) IE7 IE8(Q) Opera 中,document.body 物件支援 scroll 事件。其他瀏覽器中不支援。
5. 各瀏覽器對 document.body 物件 scroll 事件的支援
分析以下程式碼:
<script type="text/javascript"> window.onload = function() { document.body.onscroll = function() { document.getElementById("info").innerHTML = 'OK'; }; } </script> <div id="info" style="height:3000px;"></div>
- info 的高度設為 3000px,為了讓 div1 出現滾動條,這樣才能觸發滾動事件。
- 如果 scroll 事件被觸發,那麼頁面上會出現 "OK" 的文字。
在各瀏覽器下的輸出:(移動滾動條後的截圖)
IE6(S) IE8(S) Firefox Chrome Safari | IE6(Q) IE7 IE8(Q) Opera | |
---|---|---|
document.body.onscroll | 無內容輸出 | OK |
可見,在 IE6(Q) IE7 IE8(Q) Opera 中,document.body 物件支援 scroll 事件。其他瀏覽器中不支援。
6. 各瀏覽器對 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>
- info 的高度設為3000px,為了讓 div1 出現滾動條,這樣才能觸發滾動事件。
- 如果 scroll 事件被觸發,那麼頁面上會出現 "OK" 的文字。
在各瀏覽器下的輸出:(移動滾動條後的截圖)
IE6(S) IE7(S) IE8(S) | IE6(Q) IE7 IE8(Q) Opera Firefox Chrome Safari | |
---|---|---|
document.documentElement.onscroll | OK | 無內容輸出 |
可見,在 IE6(S) IE7(S) IE8(S) 中,document.documentElement 物件支援 scroll 事件。其他瀏覽器中不支援。
解決方案
在給整個瀏覽器視窗繫結滾動事件 (scroll) 的時候,繫結到 window 物件上。
參見
知識庫
相關問題
測試環境
作業系統版本: | Windows 7 Ultimate build 7600 |
---|---|
瀏覽器版本: | IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4 Opera 10.60 |
本文更新時間: | 2010-07-26 |
關鍵字
window document scroll onscroll 滾動