在滚动反应钩子上更新状态

import { useState, useEffect } from 'react';

function useScroll() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const updatePosition = () => {
      setScrollPosition(window.pageYOffset);
    };

    window.addEventListener('scroll', updatePosition);

    // 清除监听器
    return () => window.removeEventListener('scroll', updatePosition);
  }, []); // 空依赖数组确保监听器只被添加一次

  return scrollPosition;
}

export default useScroll;

import React from 'react';
import useScroll from './useScroll';

function ScrollComponent() {
  const scrollPosition = useScroll();

  return (
    <div>
      <h1>当前滚动位置: {scrollPosition}px</h1>
    </div>
  );
}

export default ScrollComponent;

import { useState, useEffect } from 'react';
import throttle from 'lodash/throttle';

function useScroll() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    const updatePosition = throttle(() => {
      setScrollPosition(window.pageYOffset);
    }, 100); // 限制为每100毫秒执行一次

    window.addEventListener('scroll', updatePosition);

    return () => {
      window.removeEventListener('scroll', updatePosition);
    };
  }, []);

  return scrollPosition;
}

export default useScroll;