Window：scrollsnapchange 事件
Window 介面的 scrollsnapchange 事件在滾動操作結束、選擇了一個新的滾動捕捉目標時，會在 window 物件上觸發。
此事件的運作方式與 Element 介面的 scrollsnapchange 事件基本相同，不同之處在於，整體 HTML 文件必須被設定為滾動捕捉容器（即，在 <html> 元素上設定了 scroll-snap-type）。
語法
在諸如 addEventListener() 之類的方法中使用事件名稱，或設定事件處理程式屬性。
js
addEventListener("scrollsnapchange", (event) => { })
onscrollsnapchange = (event) => { }
事件型別
示例
基本用法
假設我們有一個 <main> 元素，其中包含大量會導致其滾動的內容。
html
<main>
<!-- Significant content -->
</main>
可以透過組合 CSS 屬性將 <main> 元素轉變為滾動容器，例如：
css
main {
width: 250px;
height: 450px;
overflow: scroll;
}
然後，我們可以透過在 <html> 元素上指定 scroll-snap-type 屬性，來為滾動內容實現滾動吸附行為。
css
html {
scroll-snap-type: block mandatory;
}
下面的 JavaScript 程式碼片段將導致當 <main> 元素的子元素成為新選中的捕捉目標時，在 HTML 文件上觸發 scrollsnapchange 事件。在處理函式中，我們在 SnapEvent.snapTargetBlock 引用的子元素上設定一個 selected 類，該類可以在事件觸發時用於為其設定樣式，使其看起來像是被選中了（例如，透過動畫）。
js
window.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
規範
| 規範 |
|---|
| CSS 滾動捕捉模組級別 2 # scrollsnapchange |
瀏覽器相容性
載入中…
另見
scrollsnapchanging事件scrollend事件SnapEvent- CSS
scroll-snap-type屬性 - CSS 滾動吸附模組
- 使用滾動捕捉事件
- developer.chrome.com 上的滾動捕捉事件 (2024)