Element：scrollend 事件
scrollend 事件在元素滚动完成时触发。当滚动位置不再有挂起的更新且用户已完成其手势操作时，即视为滚动完成。
滚动位置的更新包括平滑或即时的鼠标滚轮滚动、键盘滚动、scroll-snap 事件，或其他会导致滚动位置更新的 API 和手势。触摸平移或触控板滚动等用户手势，在指针或按键释放之前不会被视为完成。如果滚动位置没有发生变化，则不会触发 scrollend 事件。
如需检测 Document 内部的滚动何时完成，请参见 Document 的 scrollend 事件。
语法
在类似 addEventListener() 这样的方法中使用事件名称，或设置事件处理器属性。
js
addEventListener("scrollend", (event) => { })
onscrollend = (event) => { }
事件类型
通用的 Event。
示例
在事件监听器中使用 scrollend
下面的示例展示了如何使用 scrollend 事件来检测用户何时停止了滚动：
html
<div id="scroll-box">
<p id="scroll-box-title">滚动我！</p>
<p id="large-element"></p>
</div>
<p id="output">等待 scroll 事件……</p>
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.addEventListener("scroll", (event) => {
output.textContent = "触发 scroll 事件，等待 scrollend……";
});
element.addEventListener("scrollend", (event) => {
output.textContent = "触发 scrollend 事件！";
});
使用 onscrollend 事件处理器属性
下面的示例展示了如何使用 onscrollend 事件处理器属性来检测用户何时停止了滚动：
html
<div id="scroll-box">
<p id="scroll-box-title">滚动我！</p>
<p id="large-element"></p>
</div>
<p id="output">等待 scroll 事件……</p>
js
const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");
element.onscroll = (event) => {
output.textContent = "元素触发 scroll 事件，等待 scrollend……";
};
element.onscrollend = (event) => {
output.textContent = "元素触发 scrollend 事件！";
};
规范
| 规范 |
|---|
| CSSOM View Module # eventdef-document-scrollend |
| HTML # handler-onscrollend |