Element: scrollend 事件

可用性有限

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

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

滚动位置更新包括平滑或即时鼠标滚轮滚动、键盘滚动、滚动捕捉（scroll-snap）事件，或其他导致滚动位置更新的 API 和手势。触摸平移或触控板滚动等用户手势，要到指针或按键释放后才算完成。如果滚动位置未发生变化，则不会触发 scrollend 事件。

要检测 Document 内部滚动何时完成，请参阅 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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年9月25日，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的某个问题