时间戳

首页 > 解决方案 > 对滚动位置做出反应触发效果

reactjs - 对滚动位置做出反应触发效果

问题描述

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

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

标签： reactjsanimationscrollviewport

解决方案

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

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

推荐阅读