Limited availability
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
The scrollsnapchange event of the Element interface is fired on the scroll container at the end of a scrolling operation when a new scroll snap target has been selected, just before the corresponding scrollend event fires.
A scrolling operation ends when the user finishes scrolling within a scroll container â for example using a touch gesture or by dragging the mouse pointer on a scroll bar â and releases the gesture.
SyntaxUse the event name in methods like addEventListener(), or set an event handler property.
addEventListener("scrollsnapchange", (event) => { })
onscrollsnapchange = (event) => { }
A SnapEvent, which inherits from the generic Event type.
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 that snaps to its children when scrolled using a combination of the CSS scroll-snap-type property and other properties. For example:
main {
width: 250px;
height: 450px;
overflow: scroll;
scroll-snap-type: block mandatory;
}
The following JavaScript snippet would cause the scrollsnapchange event to fire on the <main> element when one of its children becomes a newly-selected snap target. In the handler function, we set a selected class on the child referenced by the SnapEvent.snapTargetBlock property, which could be used to style it to look like it has been selected (for example, with an animation) when the event fires.
const scrollingElem = document.querySelector("main");
scrollingElem.addEventListener("scrollsnapchange", (event) => {
event.snapTargetBlock.classList.add("selected");
});
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4