元素：scroll 事件

当元素已被滚动时，将触发scroll事件。若要检测滚动何时完成，请参阅Element的scrollend事件。

语法

在诸如addEventListener()之类的 方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("scroll", (event) => {});

onscroll = (event) => {};

事件类型

一个通用的Event。

示例

以下示例演示如何使用带有事件侦听器和onscroll事件处理程序属性的scroll事件。setTimeout()方法用于对事件处理程序进行节流，因为scroll事件可能以较高的频率触发。有关使用requestAnimationFrame()的其他示例，请参阅Documentscroll事件页面。

使用事件侦听器使用scroll

以下示例演示如何使用scroll事件来检测用户何时在元素内部滚动

html
<div
  id="scroll-box"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p style="text-align: center;" id="output">Waiting on scroll events...</p>
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"
  style="overflow: scroll; height: 100px; width: 100px; float: left;">
  <p style="height: 200px; width: 200px;">Scroll me!</p>
</div>
<p id="output" style="text-align: center;">Waiting on scroll events...</p>
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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅