滚动捕捉全屏始终滚动 2 部分

Question

问题显示在这里：

https://codepen.io/team/css-tricks/pen/yLLqqgP

这是重要的部分：

    html {
        scroll-snap-type: y mandatory;
    }
    section {
        height: 100vh;
        scroll-snap-align: start;
    }

当设置高度 > 120 或类似的部分时，这个问题可以得到解决，但这是一个 hack。

当我用滚轮开始滚动时，它总是滚动两个部分，这使得整个逻辑无法使用。

我正在使用 Chrome：86.0.4240.183。

此 codepen 示例来自：https://css-tricks.com/practical-css-scroll-snapping/，这是一个非常知名的 CSS 示例资源。

Answer 1

不幸的是，这是 Chrome 中的一个已知错误，由使用 html 或具有 background-color 属性的容器作为滚动容器引起。它只影响滚轮而不影响触控板或移动设备上的触摸滚动。有关问题的演示，请参阅 this thread。

最简单的解决方案是只使用嵌套容器来保存滚动，但奇怪的是，您可能会注意到滚动捕捉现在有一点延迟。这是当前实现可以做到的最好的：

* {
  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;
}

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

不幸的是，一旦您意识到 100vh 在某些移动浏览器上也是非静态的（阅读：非常笨拙），由于实施了缩回 UI，可能会导致无样式的间隙，如 html 层所示在容器填满剩余空间之前通过。今年我花了好几个小时来解决这个问题，但还没有想出一个完全令人满意的解决方案，在大多数情况下将媒体查询重置为html，并针对任何使用 JS 的边缘情况。

这是您可以为此添加的一种可能的媒体查询：

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

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