reactjs - 对滚动位置 react 触发效果

Question

我必须在某些组件进入视口(viewport)后实现一些自定义动画，在桌面模式下应该触发它

window.scrollY > 1200

它可以在桌面上运行，但不能在移动模式下运行，问题是在移动模式下我的 window.scrollY 永远不会达到 1200。

我应该如何管理这样的滚动效果的响应能力？

export default function Layout() {


    const [navColor, setNavColor] = useState(null);
    const [x, setX] = useState(null);

    const pop = () => {
        console.log(window.scrollY);
        if(window.scrollY > 1200){
            setX(classes.Swipe);
        }
       

        if(window.scrollY > 927) {
            setNavColor('red');
        }
        else{
            setNavColor(null);
        }
    }

    window.addEventListener('scroll', () => pop());

    return (
        <div className={classes.Layout}>
            
            <Video/>
            <Navbar color={navColor}/>
            <Picture />
            <AboutMe />
            <div className={classes.c}>tessdfsdfsfdst div</div>
            <div className={[ x,classes.Div].join(' ')}>

            </div>
        </div>
    );
}

Answer 1

首先在组件安装时添加事件，并在卸载时将其删除(为了安全和性能):

useEffect(() => {
  window.addEventListener('scroll', pop);

  return () => window.removeEventListener('scroll', pop);
},[]);

那么你的函数可以是:

const pop = () => {
  if (window.scrollY > 1200) {
    setX(classes.Swipe);
  }
           
  if (window.scrollY > 927) {
    setNavColor('red');
  }
      
  setNavColor(null);
}

   

然后检测是否是移动的，你可以这样做:

function isMobile() {
  return window.innerWidth <= 800;
}