文档: scrollend 事件

有限可用性

此功能不是基线，因为它在一些使用最广泛的浏览器中不起作用。

当文档视图完成滚动时，会触发 **scrollend** 事件。当滚动位置没有更多待处理的更新并且用户完成了其手势时，滚动被认为已完成。

滚动位置更新包括平滑或即时的鼠标滚轮滚动、键盘滚动、滚动捕捉事件或其他导致滚动位置更新的 API 和手势。用户手势（如触摸平移或触控板滚动）在指针或键释放之前不会完成。如果滚动位置没有改变，则不会触发 scrollend 事件。

要检测元素内部滚动何时完成，请参阅 scrollend 事件 Element 的事件。

语法

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

addEventListener("scrollend", (event) => {});

onscrollend = (event) => {};

事件类型

通用 Event。

示例

使用 Document `scrollend` 和事件监听器

以下示例展示了如何使用 scrollend 事件和事件监听器来检测用户何时停止滚动文档。在示例中，嵌入式 iframe 中的内容比 iframe 本身更高更宽，因此可以在 iframe 内双向滚动。当用户停止滚动时，scrollend 事件被触发

* {
  margin: 10px;
}

.box-wrapper {
  width: 900px;
  border: 4px dotted;
}

.box {
  height: 100px;
  width: 100px;
  display: block;
  border: 4px dotted;
  border-radius: 10px;
}

#output {
  text-align: center;
  font-size: 1.2em;
  position: sticky;
  bottom: 0;
}

html

<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>

const output = document.querySelector("p#output");

document.addEventListener("scroll", (event) => {
  output.textContent = "Document scroll event fired!";
});

document.addEventListener("scrollend", (event) => {
  output.textContent = "Document scrollend event fired!";
});

使用 `onscrollend` 事件处理程序属性

以下示例展示了如何使用 scrollend 事件处理程序属性来检测用户何时停止滚动文档。在示例中，嵌入式 iframe 中的内容比 iframe 本身更高更宽，因此可以在 iframe 内双向滚动。这是对第一个示例的扩展，但使用 document.onscrollend 而不是事件监听器

* {
  margin: 10px;
}

.box-wrapper {
  width: 900px;
  border: 4px dotted;
}

.box {
  height: 100px;
  width: 100px;
  display: block;
  border: 4px dotted;
  border-radius: 10px;
}

#output {
  text-align: center;
  font-size: 1.2em;
  position: sticky;
  bottom: 0;
}

html

<div class="box-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>
<p id="output">Waiting on scroll events...</p>

document.onscroll = (event) => {
  output.textContent = "Document scroll event fired!";
};

document.onscrollend = (event) => {
  output.textContent = "Document scrollend event fired!";
};

规范

规范
CSSOM View 模块 # eventdef-document-scrollend
HTML 标准 # handler-onscrollend

浏览器兼容性

BCD 表仅在浏览器中加载