1

问题显示在这里：

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 示例资源。

4

1 回答 1

2

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

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

* {
  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 的实现在某些移动浏览器上也是非静态的（阅读：极其 janky），问题就会变得复杂，这可能会导致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;
  }
}
于 2020-11-08T23:28:23.760 回答