Window: sự kiện scrollsnapchange
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scrollsnapchange event of the Window interface is fired on the window at the end of a scrolling operation when a new scroll snap target is selected.
This event works in much the same way as the Element interface's scrollsnapchange event, except that the overall HTML document has to be set as the scroll snap container (i.e., scroll-snap-type is set on the <html> element).
Cú pháp
Sử dụng tên sự kiện trong các phương thức như addEventListener(), hoặc thiết lập thuộc tính trình xử lý sự kiện.
addEventListener("scrollsnapchange", (event) => { })
onscrollsnapchange = (event) => { }
Kiểu sự kiện
Ví dụ
Basic usage
Let's say we have a <main> element containing significant content that causes it to scroll:
<main>
<!-- Significant content -->
</main>
The <main> element can be turned into a scroll container using a combination of CSS properties, for example:
main {
width: 250px;
height: 450px;
overflow: scroll;
}
We can then implement scroll snapping behavior on the scrolling content by specifying the scroll-snap-type property on the <html> element:
html {
scroll-snap-type: block mandatory;
}
The following JavaScript snippet would cause the scrollsnapchange event to fire on the HTML document when a child of the <main> element becomes a newly-selected snap target. In the handler function, we set a selected class on the child referenced by the SnapEvent.snapTargetBlock, which could be used to style it to look like it has been selected (for example, with an animation) when the event fires.
window.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Scroll Snap Module Level 2 # scrollsnapchange |
Tính tương thích trên trình duyệt
Xem thêm
scrollsnapchangingeventscrollendeventSnapEvent- CSS
scroll-snap-typeproperty - CSS scroll snap module
- Using scroll snap events
- Scroll Snap Events on developer.chrome.com (2024)