javascript - 实时垂直视口跟踪在 React 中不起作用

Question

我想在特定时刻获取当前y position的 de来更改 ui。document我使用 atm 的代码不起作用，我不明白为什么。

const [verticalPosition, setVerticalPosition] = useState()

useEffect(() => {
    setVerticalPosition(window.scrollY)
}, [window.scrollY])

useEffect(() => {
    console.log(verticalPosition)
}, [verticalPosition])

我已经搜索了替代方案，并找到了最复杂的库来做这么简单的事情。所以我想让它以这种方式工作。有人能告诉我这怎么能起作用吗？

提前致谢

标签： javascriptreactjsreact-hooks

Answer 1

您需要像这样向document.scroll事件添加事件侦听器：

const [verticalPosition, setVerticalPosition] = useState()

useEffect(() => {
    const onScroll = ()=>{
        setVerticalPosition(window.scrollY);
    }
    document.addEventListener('scroll', onScroll);
    return ()=>document.removeEventListener('scroll', onScroll); // cleanup function runs when component is unmounted
}, []); // empty dependency array so it only runs on mount

专家提示

如果您在多个组件中需要此行为，则将其抽象为自定义钩子很简单：

// hooks/useScrollY.js
const useScrollY = ()=>{
  const [verticalPosition, setVerticalPosition] = useState()

  useEffect(() => {
      const onScroll = ()=>{
          setVerticalPosition(window.scrollY);
      }
      document.addEventListener('scroll', onScroll);
      return ()=>document.removeEventListener('scroll', onScroll);
  }, []); 
  return verticalPosition;
}
export default useScrollY;

// how to use:
import useScrollY from "../hooks/useScrollY"

const MyComponent = ()=>{
  const scrollY = useScrollY();
  // do something with scrollY
  return (
    //...
  );
}