如何在 React 中正确实现滚动时显示滚动条、停止滚动后自动隐藏的交互效果-js教程-PHP中文网

如何在 React 中正确实现滚动时显示滚动条、停止滚动后自动隐藏的交互效果

本文讲解如何在 react 中通过原生事件监听与防抖机制，精准控制自定义滚动容器的滚动条显隐状态，避免因状态更新触发重渲染导致的滚动事件无限循环问题。

本文讲解如何在 react 中通过原生事件监听与防抖机制，精准控制自定义滚动容器的滚动条显隐状态，避免因状态更新触发重渲染导致的滚动事件无限循环问题。

在 React 中直接在 JSX 中绑定 onScroll 并配合 useState + debounce 控制滚动条显隐（如 ::-webkit-scrollbar { display: none }）时，极易陷入「滚动到底部后状态反复切换→触发重渲染→再次触发 scroll 事件」的死循环。根本原因在于：每次 setIsScroll(true) 后组件重渲染，若 DOM 结构或样式变化（如 scrollbar 显隐切换）影响了滚动容器的布局或滚动位置，浏览器可能重新触发 scroll 事件，形成恶性循环——尤其在内容接近容器底部时更为敏感。

✅ 正确解法是脱离 React 渲染生命周期，改用原生 DOM 事件监听 + useEffect 管理副作用，确保滚动逻辑与状态更新解耦：

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

export default function ScrollableContainer() {
  const [isScrolling, setIsScrolling] = useState(false);
  const containerRef = useRef<htmldivelement>(null);

  // 防抖函数：滚动停止 1s 后隐藏滚动条
  const handleScrollEnd = useRef(
    debounce(() => {
      setIsScrolling(false);
    }, 1000)
  ).current;

  useEffect(() => {
    const container = containerRef.current;
    if (!container) return;

    const handleScroll = () => {
      setIsScrolling(true);
      handleScrollEnd();
    };

    container.addEventListener('scroll', handleScroll);
    return () => {
      container.removeEventListener('scroll', handleScroll);
      handleScrollEnd.cancel(); // 清理待执行的防抖回调
    };
  }, [handleScrollEnd]);

  return (
    <div ref="{containerRef}" css="{`" border: solid width: height: overflow: auto display: none firefox scrollbar-width:>
      <div>
        {/* 内容省略，同原文 */}
        Contrary to popular belief, Lorem Ipsum is not simply random text...
      </div>
    </div>
  );
}</htmldivelement>

? 关键要点说明：

Dagre React Flow

使用 dagre 与 React Flow (@xyflow/react) 实现自动图布局。适用于自动布局、层级布局、树形结构或节点排列等场景。

下载

使用 useRef 存储防抖函数：避免 useMemo 依赖空数组导致函数内部闭包捕获过期的 setIsScrolling，同时防止重复创建；
useEffect 精准管理事件监听：确保监听器仅在挂载时添加、卸载时移除，并调用 debounce.cancel() 避免内存泄漏；
CSS 隐藏滚动条需兼顾兼容性：::-webkit-scrollbar { display: none } 适用于 Chrome/Safari，scrollbar-width: none 是 Firefox 的标准写法；
不依赖 onScroll JSX 属性：避免因 React 事件系统与原生滚动行为耦合引发的重渲染干扰。