对滚动位置反应触发效果

问题描述

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

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>
    );
}

解决方法

首先在组件安装时添加您的事件，并在卸载时将其删除（为了安全和性能）：

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;
}