It just works. Scroll your mouse over the container to navigate between items. It is dead simple and only ~50 lines of code that are easily customisable. No dependencies.
Drop
<div class="scroll-snap" active-item="1">
<div class="scroll-snap__item">Item 1</div>
<div class="scroll-snap__item">Item 2</div>
<div class="scroll-snap__item">Item 3</div>
</div>code wherever you need in your markup.
Link scrollsnap.css in your header and scrollsnap.js before end of body tag.
.scroll-snap {
position: fixed;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: 1;
}.scroll-snap__item {
/* making it faster with custom timing */
transition: transform 0.3s cubic-bezier(.17,.67,.83,.67);
}let scrollSnap = document.querySelector('.scroll-snap');
// this is how you get current item
console.log(scrollSnap.getAttribute('current-item'));
// this is how you set current item
scrollSnap.setAttribute('current-item', 2);initScrollSnap(newScrollSnapDOMNode);There is max of 9 items supported in code by default. If you need more you might need to review your design. Here is a way how you can add support for more
*:nth-child(10) { --nth-child-idx: 10; }
.scroll-snap[active-item="10"] { --active-item: 10; }const scrollSnap = document.querySelector('.scroll-snap');
const observer = new MutationObserver(function() {
console.log(scrollSnap.getAttribute('active-item'));
});
observer.observe(scrollSnap, { attributes: true, attributeFilter: ['active-item']});