<main> or a custom wrapper) has the correct CSS properties, such as scroll-snap-type and overflow-y: scroll. The snapping should be applied to the scrolling parent, not the body, for best results. Example:
<main>scroll-snap-typeoverflow-y: scroll main {
overflow-x: hidden;
scroll-snap-type: y mandatory;
height: 100vh;
overflow-y: scroll;
}
.hero-snap-section {
scroll-snap-align: start;
height: 100vh;
} .container {
display: flex;
}
.sidebar {
position: sticky;
top: 0;
height: 100vh;
flex: 0 0 300px; /* or your desired width */
}
.content {
flex: 1;
overflow-y: auto;
height: 100vh;
}