My goal is to have the main hero section of the website take up the entire screen, and when the user scrolls down, they are immediately brought to the main content with the hero section no longer visible. However, I am experiencing an issue where if I do a smaller scroll, the hero section remains partially on the screen while the main content is also partially visible. This happens especially when using a trackpad on a laptop, as different scrolling techniques seem to affect the snap behavior.
In summary, the scroll snap feature sometimes behaves more like proximity snapping rather than the mandatory snapping that I have set it to.
I have tried various combinations of containers and CSS properties, but I can't seem to achieve the desired effect. Ideally, I want users to only see either the full hero section or the main content, without any partial views. Below is the HTML structure and CSS code that I have been working with:
HTML
<body>
<div class='hero'>
HERO HTML
</div>
<div class='maincontent'>
MAIN CONTENT HTML
</div>
</body>
CSS
body {
width: 100%;
height: 100vh;
position: relative;
scroll-behavior: smooth;
overflow-y: scroll;
scroll-snap-type: y mandatory;
scroll-snap-stop: always;
}
.hero {
width: 100%;
height: 100vh;
scroll-snap-align: start;
}
.maincontent {
width: 100%;
height: 100vh;
scroll-snap-align: start;
overflow: scroll;
}