Document: scrollsnapchanging event
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 scrollsnapchanging
event of the Document
interface is fired on the scroll container when the browser determines a new scroll snap target is pending, i.e. it will be selected when the current scroll gesture ends.
This event works in much the same way as the Element
interface's scrollsnapchanging
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).
Syntax
Use the event name in methods like addEventListener()
, or set an event handler property.
addEventListener("scrollsnapchanging", (event) => {});
onscrollsnapchanging = (event) => {};
Event type
Examples
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 scrollsnapchanging
event to fire on the HTML document when a child of the <main>
element becomes a pending snap target. In the handler function, we set a pending
class on the child referenced by the snapTargetBlock
property, which could be used to style it differently when the event fires.
document.addEventListener("scrollsnapchanging", (event) => {
// remove previously-set "pending" classes
const pendingElems = document.querySelectorAll(".pending");
pendingElems.forEach((elem) => {
elem.classList.remove("pending");
});
// Set current pending snap target class to "pending"
event.snapTargetBlock.classList.add("pending");
});
At the start of the function, we select all elements that previously had the pending
class applied and remove it, so that only the most recent pending snap target is styled.
Specifications
Specification |
---|
CSS Scroll Snap Module Level 2 # scrollsnapchanging |
Browser compatibility
BCD tables only load in the browser
See also
scrollsnapchange
eventscrollend
eventSnapEvent
- CSS
scroll-snap-type
property - CSS scroll snap module
- Using scroll snap events
- Scroll Snap Events on developer.chrome.com (2024)