onscroll 事件
描述
onscroll 事件在元素捲軸被滾動時發生。
提示: 使用 CSS overflow 樣式屬性為元素建立捲軸。
瀏覽器支援
| 事件 | |||||
|---|---|---|---|---|---|
| onscroll | 是 | 是 | 是 | 是 | 是 |
語法
技術詳情
| 冒泡 | 否 |
|---|---|
| 可取消 | 否 |
| 事件型別 | 如果從使用者介面生成，則是 UiEvent；否則是 Event |
| HTML 標籤 | <address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> 到 <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul> |
| DOM 版本 | 二級事件 |
更多示例
示例
在不同的滾動位置之間切換類名 - 當用戶從頁面頂部向下滾動 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 = "";
}
}
自己動手試一試 »
示例
當用戶從頁面頂部向下滾動 350 畫素時，滑入一個元素（新增 slideUp 類）
window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
document.getElementById("myImg").className = "slideUp";
}
}
自己動手試一試 »
