时间戳

首页 > 解决方案 > 双滚动捕捉镀铬错误

html - 双滚动捕捉镀铬错误

问题描述


我在考虑 css 中的滚动对齐对齐时遇到了一些问题，可能是由于 chrome 中的一个熟悉的错误。
我找到了两种使滚动对齐对齐的方法，但两种方法都不能正常工作。
  1. 选项 1 - 在 html 标记中使用 scroll-snap-type：
html {
   scroll-snap-type: y mandatory;
}

article {
   /* empty */
}

section {
   scroll-snap-align: start;
}
  1. 选项 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容器的，但他们都没有解决这个问题。

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

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

标签： htmlcssgoogle-chromescroll-snap

解决方案

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

在您的情况下，尽管您将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. 这应该使滚动工作得很好。

推荐阅读