当前位置：首页 > React

react如何监听滚动高度

2026-01-24 08:05:40React

监听滚动高度的实现方法

在React中监听滚动高度可以通过以下几种方式实现，具体选择取决于应用场景和需求。

使用useEffect和事件监听

通过useEffect钩子添加滚动事件监听器，获取滚动位置并更新状态。

react如何监听滚动高度

import { useState, useEffect } from 'react';

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

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

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

  return <div>当前滚动高度: {scrollPosition}px</div>;
}

监听特定容器的滚动

如果需要监听某个DOM元素（如div）的滚动高度，可以通过ref获取元素并添加事件监听。

react如何监听滚动高度

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

function ContainerScroll() {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;
    const handleScroll = () => {
      setScrollTop(container.scrollTop);
    };

    container.addEventListener('scroll', handleScroll);
    return () => {
      container.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return (
    <div ref={containerRef} style={{ height: '200px', overflow: 'auto' }}>
      <div style={{ height: '1000px' }}>当前容器滚动高度: {scrollTop}px</div>
    </div>
  );
}

使用自定义Hook封装逻辑

将滚动监听逻辑抽象为自定义Hook，便于复用。

import { useState, useEffect } from 'react';

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

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

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

  return scrollPosition;
}

function DemoComponent() {
  const scrollPosition = useScrollPosition();
  return <div>滚动高度: {scrollPosition}px</div>;
}

性能优化建议

滚动事件可能频繁触发，直接更新状态会导致性能问题。可以通过节流（throttle）或防抖（debounce）优化。

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

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

  useEffect(() => {
    const handleScroll = throttle(() => {
      setScrollPosition(window.pageYOffset);
    }, 100);

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

  return <div>优化后的滚动高度: {scrollPosition}px</div>;
}