I've been working on a single page website with screen filling "slides", and really want to use scroll snapping if possible. I got it running perfectly a few das ago, but now the entire thing is broken since Chrome updated: when using the scroll wheel, instead of smoothly snapping to a slide it quickly jumps two slides at once.
At first I figured it was because I'm also using jQuery/JS to control some scroll events, but I just noticed that the original pen that inspired me to take this approach has the exact same problem. Indeed, when turning off the JS entirely or even stripping down the code to the bare essentials, it still doesn't work right.
The original pen: https://codepen.io/team/css-tricks/pen/yLLqqgP
The code:
html, body {
scroll-snap-type: mandatory; /* for older browsers */
scroll-snap-points-y: repeat(100vh); /* for older browsers */
scroll-snap-type: y mandatory;
}
.scrollsnap-section {
height: 100vh;
scroll-snap-align: start;
position: relative;
}
//
<body>
<section id="slide-1" class="scrollsnap-section">
<h2>slide 1</h2>
</section>
<section id="slide-2" class="scrollsnap-section">
<h2>slide 2</h2>
</section>
</body>
Does anybody know what's going on here? It works in all other modern browsers and used to work in Chrome until the update to version 81.