onscroll 事件

DOM 事件 Event 對象

定義和用法

onscroll 事件在元素的滾動條被滾動時發生。

提示：請使用 CSS overflow 樣式屬性為元素創建滾動條。

實例

例子 1

在滾動 <div> 元素時執行 JavaScript：

<div onscroll="myFunction()">

親自試一試

例子 2

在不同滾動位置的類名之間切換 - 當用戶從頁面頂部向下滾動 50 像素時，類名 "test" 將被添加到元素中（再次向上滾動時將被刪除）。

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

親自試一試

例子 3

當用戶從頁面頂部向下滾動 350 像素時滑入元素（添加 slideUp 類）：

window.onscroll = function() {myFunction()};
function myFunction() {
  if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("myImg").className = "slideUp";
  }
}

親自試一試

語法

在 HTML 中：

<element onscroll="myScript">

親自試一試

在 JavaScript 中：

object.onscroll = function(){myScript};

親自試一試

在 JavaScript 中，使用 addEventListener() 方法：

object.addEventListener("scroll", myScript);

親自試一試

注釋：Internet Explorer 8 或更早的版本不支持 addEventListener() 方法。

技術細節

冒泡： 不支持
可取消： 不支持
事件類型： 如果從用戶界面生成，UiEvent。否則 Event。
支持的 HTML 標簽： <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>
DOM 版本： Level 2 Events

瀏覽器支持

事件 Chrome IE Firefox Safari Opera
onscroll 支持 支持 支持 支持 支持
DOM 事件 Event 對象