对滚动位置的反应触发效果

Question

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

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

对滚动位置的反应触发效果

React trigger effect on scroll position

animation

scroll

viewport

reactjs