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 上檢視此頁面 • 報告此內容的某個問題