滚动Snap全屏始终滚动2个部分 [英] Scroll Snap Full Screen Always Scrolls 2 Sections

问题描述

问题在这里显示:

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

这是重要的部分:

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

设置部分的高度时>120或类似的问题可以解决，但这是黑客.

When setting height of section > 120, or similar this issue can get fixed, but this is a hack.

当我使用滚轮开始滚动时，它将始终滚动两个部分，这使整个逻辑无法使用.

When I start scrolling, with a scroll wheel, then it always scrolls two sections, which makes the whole logic unusable.

我正在使用Chrome:86.0.4240.183.

I am using Chrome: 86.0.4240.183.

此代码笔示例来自: https://css-tricks.com/Practical-css-scroll-snapping/是css示例的非常著名的资源.

This codepen example is from: https://css-tricks.com/practical-css-scroll-snapping/ which is a very well known ressource for css examples.

推荐答案

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

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

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

不幸的是，一旦意识到由于实施缩回UI而在某些移动浏览器中 100vh 也是非静态的(读为:极端简陋)，问题就更加复杂了，这可能导致无样式的间隙 html 层会在容器填满剩余空间之前显示出来.我今年花了数小时与这个问题进行角力，但仍未想出一个完全令人满意的解决方案，即在大多数情况下让媒体查询重设回 html ，并针对JS的任何极端情况.

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

这篇关于滚动Snap全屏始终滚动2个部分的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！