How to show different sections of website separately on scroll

Question

guys! I am wondering how I can display each section of my website separately on scroll. For reference you can check out this website: https://vara-network.io/

I don't know what its called so I thought this is the perfect place to ask.

Thanks in advance.

Answer 1

You are looking for scroll-snap

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll_snap

The CSS scroll snap module provides properties that let you control the panning and scrolling behavior by defining snap positions. Content can be snapped into position as the user scrolls overflowing content within a scroll container, providing paging and scroll positioning.

This module includes the scroll container scroll-padding properties to adjust the optimal viewing region of paging during scroll-into-view operations. It also includes scroll-margin and scroll-alignment, set on the scroll container's children, to adjust the children's visual area when that child is scrolled into view, as well as a property to force scrolling to stop on individual children.