標準參考

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 事件監聽器，在觸發滾動條事件後，將訊息打印出來，最終可以彙總為下表：

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" 的文字。

在各瀏覽器下的輸出：(移動滾動條後的截圖)

可見，所有瀏覽器中的 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" 的文字。

在各瀏覽器下的輸出：(移動滾動條後的截圖)

可見，所有瀏覽器中的普通 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(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(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) 中，document.documentElement 物件支援 scroll 事件。其他瀏覽器中不支援。

解決方案

在給整個瀏覽器視窗繫結滾動事件 (scroll) 的時候，繫結到 window 物件上。

參見

知識庫

• ...

相關問題

• ...

測試環境

關鍵字

window document scroll onscroll 滾動