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.
window.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.
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.3