文档：scrollend 事件
scrollend 事件在文档视图完成滚动后触发。当滚动位置不再有待处理的更新，并且用户已完成其手势时，滚动即被视为完成。
滚动位置更新包括平滑或即时鼠标滚轮滚动、键盘滚动、滚动捕捉事件或其他导致滚动位置更新的 API 和手势。用户手势（如触摸平移或触控板滚动）要等到指针或按键释放后才算完成。如果滚动位置没有改变，则不会触发 scrollend 事件。
有关检测元素内滚动何时完成的信息，请参阅 Element 的 scrollend 事件。
语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("scrollend", (event) => { })
onscrollend = (event) => { }
事件类型
一个通用的 Event。
示例
使用文档 scrollend 和事件监听器
以下示例展示了如何使用 scrollend 事件和事件监听器来检测用户何时停止滚动文档。在此示例中，嵌入的 iframe 中包含比 iframe 本身更长更宽的内容，因此可以在 iframe 中向两个方向滚动。当用户停止滚动时，将触发 scrollend 事件。
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>
js
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 而不是事件监听器。
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>
js
document.onscroll = (event) => {
output.textContent = "Document scroll event fired!";
};
document.onscrollend = (event) => {
output.textContent = "Document scrollend event fired!";
};
规范
| 规范 |
|---|
| CSSOM 视图模块 # eventdef-document-scrollend |
| HTML # handler-onscrollend |
浏览器兼容性
加载中…