用于检测window.pageYOffset的自定义钩子不按预期工作。

Question

我有一个钩子，它将一个布尔值设置为如果window.pageYOffset大于100

const useScrollPosition = () => {

  const [scrollPosition, setScrollPosition] = useState(false)

  useEffect(() => {
    if (typeof window !== 'undefined') {
      window.addEventListener('scroll', () =>
        setScrollPosition(window.pageYOffset > 100)
      )
    }
  }, [])

  return [scrollPosition]
}

export default useScrollPosition

这是应用程序

          <Box
            display={displayScrollPosition ? 'none' : 'flex'}
            justifyContent="space-between"
            alignItems="center"
            border={'1px solid red'}
          >

如果布尔值为真，则容器应消失。问题在于UI。如果我滚动得够快，它就会翻转得很干净。但是如果我把屏幕滚动到100 (window.pageYOffset)左右，布尔值就会一次又一次地翻转，组件显示和隐藏的速度很快，看起来就像一个小故障。任何人都经历过类似的事情，或者能提供一个可能的解决方案？

Answer 1

自定义钩

import { useEffect, useState } from "react";

export const useScrollPosition = () => {
  const [scrollPos, setScrollPos] = useState(false);

  useEffect(() => {
    if (typeof window !== "undefined") {
      window.addEventListener("scroll", () => {
        if (window.pageYOffset > 100) {
          setScrollPos(true);
        }else{
          setScrollPos(false);
        }
      });
    }
  }, []);
  return { scrollPos };
};

App.js

import { useScrollPosition } from "your route custom hook";

export default function App() {
  const { scrollPos } = useScrollPosition();

  return (
   <div className="App">
      <Box
        display={scrollPos ? 'none' : 'flex'}
        justifyContent="space-between"
        alignItems="center"
        border={'1px solid red'}
      >
   </div>
  );
}