试图在反应中检测滚动方向答案

【问题标题】：Trying to detect scroll direction in react试图在反应中检测滚动方向
【发布时间】：2021-08-15 22:59:54
【问题描述】：

我想在滚动方向上移动一些html元素。我添加了一个滚动事件侦听器，它更新滚动位置的状态。我还有一个 useRef ，它在每次更改时存储滚动位置的先前值。我比较以前的值和当前的滚动位置。如果滚动位置较大，则表示滚动方向向下。否则，滚动方向向上。但是，此代码不起作用。条件似乎总是错误的。如何使用 react 检测滚动方向。

import './App.css';

function App() {

  const [scrollPosition, setScrollPosition]=useState(window.scrollY);
  const prevScrollPosition=useRef(0);

  useEffect(()=>{
    window.addEventListener('scroll',((e)=>{
      setScrollPosition(window.scrollY);
    }))
  },[])

  useEffect(()=>{
    prevScrollPosition.current=scrollPosition;

    
    
    if(scrollPosition>prevScrollPosition.current){
      document.querySelector(".scalp").style.top=(document.querySelector(".scalp").offsetTop+7)+"px";
      document.querySelector(".brain").style.top=(document.querySelector(".brain").offsetTop+3)+"px";

    }else{
      document.querySelector(".scalp").style.top=(document.querySelector(".scalp").offsetTop-7)+"px";
      document.querySelector(".brain").style.top=(document.querySelector(".brain").offsetTop-3)+"px";
    }

  },[scrollPosition])

  
  
  return (
    <div className="App">
      
      <video className="cloudsVideo" autoplay playsinline autoplay loop muted src="Pexels Videos 3723.mp4" muted loop autoplay alt="clouds"></video>
      <video className="spaceVideo" autoplay playsinline autoplay loop muted src="pexels-ahnaf-piash-5747525.mp4" muted loop autoplay alt="space"></video>
      <img className="scalp" src="scalp.png"/>
      <img className="brain" src="Brain-PNG-Photos.png"/>
      <img className="head" src="head.png"/>

      <h1>{scrollPosition}</h1>
      <h1>{prevScrollPosition.current}</h1>
      <h1>{scrollPosition-prevScrollPosition.current}</h1>
      

      
    </div>
  );
}

export default App;

【问题讨论】：

在检查 scrollPosition 是否大于 prevScrollPosition 之前，您正在设置 `prevScrollPosition.current = scrollPosition'。将 prevScrollPosition 更新移动到 useEffect 的末尾应该可以修复它。

标签： javascript css reactjs scroll

【解决方案1】：

我认为这样的事情对你有用：

import { useState, useRef, useEffect, useCallback } from 'react';

export const useScrollDirection = () => {
  const [scrollPosition, setScrollPosition] = useState<number>(0);
  const [isScrollingUp, setIsScrollingUp] = useState<boolean>(false);
  const [isScrollingDown, setIsScrollingDown] = useState<boolean>(false);
  const prevScrollPosition = useRef<number>(0);

  const handleScroll = useCallback(() => {
    prevScrollPosition.current = scrollPosition;
    const position = window.pageYOffset;
    setScrollPosition(position);
  }, [scrollPosition]);

  useEffect(() => {
    window.addEventListener('scroll', handleScroll, { passive: true });

    if (scrollPosition - prevScrollPosition.current > 0) {
      setIsScrollingUp(false);
      setIsScrollingDown(true);
    } else if (scrollPosition - prevScrollPosition.current < 0) {
      setIsScrollingDown(false);
      setIsScrollingUp(true);
    }
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, [handleScroll, scrollPosition]);

  return { isScrollingDown, isScrollingUp };
};

【讨论】：