scroll-snap 跳过小屏幕上的部分 - Chrome答案

【问题标题】：scroll-snap skips section on smaller screen - Chromescroll-snap 跳过小屏幕上的部分 - Chrome
【发布时间】：2022-04-06 02:12:29
【问题描述】：

我正在尝试在页面上实现滚动捕捉。我已将 scroll-snap-type 添加到容器元素并将 scroll-snap-align 添加到子部分。它在大屏幕上的 Chrome 和所有屏幕尺寸的 Firefox 上都能正常工作。但是，它似乎跳过了 Chrome 上较小屏幕上的部分。所以它会显示孩子 1、3、5 等等。代码如下：

.hero-pages {
    height: 100vh;
    scroll-snap-type: y mandatory   ;
    overflow-y: scroll;
}

.hero-page {
    height: 100vh;
    background-image: none;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    position: relative;

}

<div className="homepage">
    <Navbar></Navbar>
    <div className="hero-pages">
        <HeroPage index={0}></HeroPage>
        <HeroPage index={1}></HeroPage>
        <HeroPage index={2}></HeroPage>
        <HeroPage index={3}></HeroPage>
        <HeroPage index={4}></HeroPage>
        <HeroPage index={5}></HeroPage>
    </div>
</div>

尝试使用 css 并更改值，但我不确定问题是什么。阅读一些关于导致问题的 chrome 错误的帖子，解决方案是添加一个包装容器，这就是我的代码所拥有的。我正在使用 React 来设计页面。

谢谢。

编辑：添加了 gif 来帮助我解释行为：

正确行为 - 外部大屏幕 - Chrome：

错误行为 - 笔记本电脑屏幕 14 英寸 - Chrome：

【问题讨论】：

在原始帖子中添加了 GIF 以帮助解释我的问题。谢谢

标签： html css reactjs scroll scroll-snap

【解决方案1】：

我相信 Chrome 在小屏幕上的奇怪滚动行为是由于它对触摸屏的优化。

我的解决方案是使用 setInterval() 来观察滚动位置并仅在用户停止滚动时执行滚动对齐。

注意：只要所有部分的高度相同，脚本就接受不同高度的部分。

https://codesandbox.io/s/cc-polyfill-scroll-snap-lsyr5i

【讨论】：