reactjs - 如何在主窗口上使用 react-spring 视差

Question

这是我第一次实现 react-parallax 效果，目标是在某些部分使用视差标签，但不是全部，但无论我尝试什么，视差标签似乎只是在这些部分创建一个单独的容器，我最终有两个滚动条。我只是想知道是否没有办法实现视差效果，只使用窗口滚动条作为唯一的滚动条。

import { Parallax, ParallaxLayer } from '@react-spring/parallax'

const Cards = () => {
   

   

    return (
        <>
             <Titlebar title= 'Three major ethnic groups' />
             <Parallax pages={3}>
      <ParallaxLayer sticky={{ start: 1, end: 3 }} style={{  justifyContent: 'flex-start' }}>
          <Test text='bole' paragraph='gimme that bole' source= {igbo} alter='igbo' />
        </ParallaxLayer>


        <ParallaxLayer offset={0} speed={0.5} style={{ justifyContent: 'flex-end' }}>
          <p >Scroll down</p>
        </ParallaxLayer>

        

        <ParallaxLayer offset={1.5} speed={1.5} style={{ justifyContent: 'flex-end' }}>
          <div>
            <p>I'm not</p>
          </div>
        </ParallaxLayer>
      </Parallax>
        </>
    )
}

export default Cards

这是我项目中的一些示例代码，再次解释一下。我希望能够使用仅使用窗口滚动条来滚动页面中的所有元素

标签： reactjsreact-hooks