元素：scrollend 事件

可用性有限

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

scrollend 事件在元素滚动完成后触发。当滚动位置不再有待处理的更新并且用户完成了其手势时，滚动被认为已完成。

滚动位置更新包括平滑或立即的鼠标滚轮滚动、键盘滚动、滚动捕捉事件，或导致滚动位置更新的其他 API 和手势。像触摸平移或触控板滚动这样的用户手势直到指针或按键释放才算完成。如果滚动位置没有改变，则不会触发 scrollend 事件。

要检测文档内部的滚动何时完成，请查看Document 的 scrollend 事件。

语法

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

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

onscrollend = (event) => {};

事件类型

一个通用的 Event。

示例

使用事件监听器与 `scrollend` 一起使用

以下示例展示了如何使用 scrollend 事件来检测用户何时停止滚动

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}

html

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.addEventListener("scroll", (event) => {
  output.textContent = "Scroll event fired, waiting for scrollend...";
});

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

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

以下示例展示了如何使用 onscrollend 事件处理程序属性来检测用户何时停止滚动

#scroll-box {
  height: 100px;
  width: 100px;
  float: left;
  overflow: scroll;
  outline: 4px dotted;
  margin: 4px;
}

#scroll-box-title {
  position: fixed;
  top: 5px;
  left: 5px;
  transform: translateX(0);
}

#large-element {
  height: 200px;
  width: 200px;
}

#output {
  text-align: center;
}

html

<div id="scroll-box">
  <p id="scroll-box-title">Scroll me!</p>
  <p id="large-element"></p>
</div>
<p id="output">Waiting on scroll events...</p>

const element = document.querySelector("div#scroll-box");
const output = document.querySelector("p#output");

element.onscroll = (event) => {
  output.textContent = "Element scroll event fired, waiting for scrollend...";
};

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

规范

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

浏览器兼容性

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