2

我正在尝试在页面上实现滚动捕捉。我已将 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： 在此处输入图像描述

4

0 回答 0