2

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.

Luke
  • 181
  • 5
  • Check out this discussion https://stackoverflow.com/questions/56629124/chromes-hidden-css-scroll-snap-threshold-and-how-to-change-it – Abdullah Deliogullari Apr 25 '20 at 08:51
  • Thanks Abdullah, but that discussion covers a different problem. – Luke Apr 25 '20 at 16:25
  • Update: I've more or less "solved" the problem by putting everyting in a container element and applying the scroll-snap-type to that, but that's an inelegant workaround that causes other problems such as a sticky menu now overlapping the scrollbar... I still would love to know what happened with how Chrome deals with scroll-snap-type applied to the entire document and if there's a better solution. The same problem occurs in various tutorials that used to work perfectly. – Luke Apr 25 '20 at 16:29
  • Can you also check out this https://developers.google.com/web/updates/2018/07/css-scroll-snap. Especially The API Story part. – Abdullah Deliogullari Apr 25 '20 at 16:38
  • @Luke I wonder if it'll ever get fixed. The container solution doesn't play nicely with mobile browsers – Maometto Jun 21 '21 at 14:23

0 Answers0