双滚动快照 chrome 错误

Question

我在考虑 css 中的 scroll-snap-align 时遇到了一些问题，可能是由于 chrome.
中的一个熟悉的错误我找到了两种使滚动对齐对齐工作的方法，但这两种方法都不正确。

选项 1 - 在 html 标签中使用 scroll-snap-type:

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

article {
   /* empty */
}

section {
   scroll-snap-align: start;
}

选项 2 - 在容器（文章）标签中使用 scroll-snap-type：

html {
   /* empty */
}

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

section {
   scroll-snap-align: start;
}

问题是选项 1 导致 chrome 中的双滚动错误，我还没有找到修复它的方法（更改背景颜色对我不起作用），而选项 2 根本不会做任何事情，就好像我没有写这行代码一样。

我也尝试过 overflow-y、overscroll-behavior-y 或更改容器的 height，但其中 none 解决了问题。

我非常感谢任何愿意帮助我的人:)

P.S 如果它以某种方式重要，我正在使用 create-react-app。

Answer 1

关键是您需要确保设置为滚动捕捉的元素实际上是正在滚动的元素。

在您的例子中，虽然您将 scroll-snap-type 属性放置在 article 元素上，但 article 可以自由堆叠其内容并填充其父元素。因此，当您滚动时，滚动的是 html 元素，而不是 article 元素。

要解决这个问题，只需添加

article {
    scroll-snap-type: y mandatory;
    height: 100vh; /* match the height of the screen */
    overflow-y: scroll; /* force it to scroll */
}

这将如您所愿。但是，因为您的 footer 元素在 article 之外，当您到达底部时，它将滚动 html 元素以显示它。然后，如果您向上滚动 article 而不是 footer，footer 将保留并且您的 article 将仅部分可见。

因此，我建议您实际将上述样式添加到您的 div#root 元素中，并将 scroll-snap-align: start; 添加到您的 footer 中。这应该使滚动效果很好。

双滚动快照 chrome 错误

double scroll snap chrome bug

html

css

google-chrome

scroll-snap