Scroll Snap Bug (Mac 上的 Chrome) - 允许向上滚动到 HTML void答案

【问题标题】：Scroll Snap Bug (Chrome on Mac) - allowing scroll up into the HTML voidScroll Snap Bug (Mac 上的 Chrome) - 允许向上滚动到 HTML void
【发布时间】：2020-12-03 01:57:12
【问题描述】：

尝试确定这是 Chrome 或我的代码的错误。使用下面的代码，当我向下滚动时，它会执行我想要的操作，但是当我向上滚动时，它可以让我滚动到我想要的高度，而不会让身体弹回。我已将滚动捕捉应用到 html，因为如果在正文上，它在 Chrome 中不起作用。

演示：http://manifest.thedevtest.com/scrollsnap/（向上滚动）

代码：

<html>
<head>
    <title>Chrome Scroll Snap Issue Demo</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html {

          scroll-snap-type: mandatory;
            scroll-snap-points-y: repeat(100vh);
            scroll-snap-type: y mandatory;
            background: red;
        }

        section {
            height: 100vh;
            width: 100vw;
            scroll-snap-align: start;
        }
        .foo {
            background-color: green;
        }
        .bar {
            background-color: blue;
        }
        </style>
</head>
<body>
    <section class="foo">
    </section>
    <section class="bar">
    </section>

</body>
</html>

你们能复制这个吗？如果可以，你有什么想法可以阻止它吗？

【问题讨论】：

标签： html css google-chrome

【解决方案1】：

我还没有确定这是否是 chrome 的错误，但修复是管理过度滚动行为（可以在 Chrome 中完成）https://developers.google.com/web/updates/2017/11/overscroll-behavior

body {
    overscroll-behavior-y: none;
}

完成这项工作。感谢 reddit 上的 /u/Anemina。 https://old.reddit.com/r/css/comments/i9kkiw/scroll_snap_bug_chrome_on_mac/

【讨论】：

【解决方案2】：

看起来有人因为 HTML 持续溢出错误而登录 a bug。我也看到过其他 1 个类似的问题，您可以继续向上滚动，但不使用滚动捕捉点。所以我认为它们不是问题。

我可以将scroll-snap-type 放在body 上，这为我修复了演示。铬 87。

body {
  scroll-snap-type: y mandatory;
}

再试一次？

我的 2 美分/想法：
我认为将滚动快照放在html 标签上并不是一个好主意。我通常最终将我的 body scroll-snap 原型提取为 <main> 或其他东西，并使其更像是一个组件而不是文档样式。

【讨论】：