语法
在诸如 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 |
浏览器兼容性
加载中…