Scroll Snap Full Screen Always Scrolls 2 Sections

The problem is shown here: https://codepen.io/team/css-tricks/pen/yLLqqgP This is the important part: html { scroll-snap-type: y mandatory; } section {

Solution 1:

This is a known bug in Chrome unfortunately, caused by using either html or a container with a background-color property for the scroll container. It only affects scroll wheels and not trackpads or touch scrolling on mobile. See this thread for a demonstration of the problem.

The simplest solution is to just use a nested container to hold the scroll, although, bizarrely, you may notice that the scroll-snap now has a small delay on it. This is the best that can be done with the current implementation:

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

.container {
  height: 100vh;
  width: 100%;
  overflow: auto;
  scroll-snap-type: y mandatory;
}

h1 {
  width: 100%;
  height: 100vh;
  scroll-snap-align: start;
  border: 2px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
}

<divclass="container"><h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1></div>

The problem is unfortunately compounded once you realise that 100vh is also non-static (read: extremely janky) on some mobile browsers due to the implementation of retracting UI, potentially leading to unstyled gaps as the html layer shows through before the container fills up the remaining space. I've spent hours wrestling with this issue this year and have yet to come up with a totally satisfactory solution, settling for media queries to reset back to html in most cases and targeting any edge cases with JS.

Here's one possible media query you could add for that:

@media (hover: none) and (pointer: coarse) {
  html {
    overflow: auto;
    scroll-snap-type: y mandatory;
  }

  .container {
    height: auto;
    display: contents;
    scroll-snap-type: unset;
  }
}