本文讲解如何在 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: 1px solid #ccc;
width: 500px;
height: 200px;
overflow: auto;
${!isScrolling && `
&::-webkit-scrollbar { display: none; }
/* 兼容 Firefox */
scrollbar-width: none;
`}
`}
>
<div>
{/* 内容省略，同原文 */}
Contrary to popular belief, Lorem Ipsum is not simply random text...
</div>
</div>
);
}? 关键要点说明：
-
使用
useRef存储防抖函数：避免useMemo依赖空数组导致函数内部闭包捕获过期的setIsScrolling，同时防止重复创建； -
useEffect精准管理事件监听：确保监听器仅在挂载时添加、卸载时移除，并调用debounce.cancel()避免内存泄漏； -
CSS 隐藏滚动条需兼顾兼容性：
::-webkit-scrollbar { display: none }适用于 Chrome/Safari，scrollbar-width: none是 Firefox 的标准写法； -
不依赖
onScrollJSX 属性：避免因 React 事件系统与原生滚动行为耦合引发的重渲染干扰。
? 进阶提示：若需支持 iOS Safari（其滚动行为更复杂），建议增加 touchstart/touchmove 监听作为补充；对无障碍访问友好起见，隐藏滚动条时应确保仍可通过键盘（如 PageDown）滚动，或提供显式滚动控件。
此方案彻底规避了状态更新触发滚动事件的连锁反应，实现了流畅、稳定、可预测的滚动条显隐控制。
