語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("scroll", (event) => { })
onscroll = (event) => { }
事件型別
一個通用的 Event。
示例
以下示例展示瞭如何使用帶有事件監聽器和 onscroll 事件處理程式屬性的 scroll 事件。setTimeout() 方法用於 節流事件處理程式，因為 scroll 事件可能以很高的速率觸發。有關使用 requestAnimationFrame() 的其他示例，請參閱 Document 的 scroll 事件頁面。
使用 scroll 配合事件監聽器
以下示例展示瞭如何使用 scroll 事件來檢測使用者何時在元素內滾動
html
<div id="scroll-box">
<p>Scroll me!</p>
</div>
<p id="output">Waiting on scroll events...</p>
css
#scroll-box {
overflow: scroll;
height: 100px;
width: 100px;
float: left;
}
#scroll-box p {
height: 200px;
width: 200px;
}
#output {
text-align: center;
}
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.textContent = "Scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
});
使用 onscroll 事件處理程式屬性
以下示例展示瞭如何使用 onscroll 事件處理程式屬性來檢測使用者何時滾動
html
<div id="scroll-box">
<p>Scroll me!</p>
</div>
<p id="output">Waiting on scroll events...</p>
css
#scroll-box {
overflow: scroll;
height: 100px;
width: 100px;
float: left;
}
#scroll-box p {
height: 200px;
width: 200px;
}
#output {
text-align: center;
}
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.textContent = "Element scroll event fired!";
setTimeout(() => {
output.textContent = "Waiting on scroll events...";
}, 1000);
};
規範
| 規範 |
|---|
| CSSOM 檢視模組 # eventdef-document-scroll |
| HTML # handler-onscroll |
瀏覽器相容性
載入中…