如何检测反应js中div元素内的上下滚动？

Question

目前，我有这个自定义钩子来检测用户是否向下/向上滚动页面整个页面，但是如何实现它来检测 div 元素内的向下和向上滚动？

通过使用参考？ 有什么建议吗？

export const useScrollDirection = () => {
  const [scrollDirection, setScrollDirection] = useState(null);
  const [prevOffset, setPrevOffset] = useState(0);

  console.log("prevOffset", prevOffset);
  const toggleScrollDirection = () => {
    let scrollY = window.scrollY;
    console.log("scrollY", scrollY);
    if (scrollY === 0) {
      setScrollDirection(null);
    }
    if (scrollY > prevOffset) {
      setScrollDirection("down");
    } else if (scrollY < prevOffset) {
      setScrollDirection("up");
    }
    setPrevOffset(scrollY);
  };
  useEffect(() => {
    window.addEventListener("scroll", toggleScrollDirection);
    return () => {
      window.removeEventListener("scroll", toggleScrollDirection);
    };
  });
  return scrollDirection;
};

Answer 1

首先，在componentDidMount()中创建一个变量并使用当前滚动 position 进行初始化。 然后将handleScroll()附加到目标元素。 我正在使用这个希望这对你也有帮助。

componentDidMount() {
    this.prev = window.scrollY;
}
handleScroll = (e) => {
    //console.log("scrolling!", e.target.scrollTop);

    const window = e.target;

    if (this.prev > window.scrollTop) {
      console.log("scrolling up");
    } else if (this.prev < window.scrollTop) {
      console.log("scrolling down");
    }
    this.prev = window.scrollTop;
};

然后将handleScroll()附加到目标元素。

<div onScroll={this.handleScroll}>
</div>