如何让onscroll事件仅在首次滚动触发？解决React滚动条闪烁问题

问题原因 #

• 滚动事件触发频率极高（每秒可达几十次），当前逻辑每次触发就翻转isScroll状态，导致滚动条不断在显隐之间切换，是闪烁的核心诱因
• 用display: none控制滚动条显隐会触发布局重排，内容宽度会随滚动条的出现消失被挤压/释放，进一步加重闪烁
• 缺少「滚动结束后延迟隐藏」的逻辑，不符合「仅滚动时显示」的产品需求

修复方案 #

1. 调整状态逻辑与滚动处理函数 #

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

// 初始状态设为false，默认隐藏滚动条
const [showScrollbar, setShowScrollbar] = useState(false)
// 用ref存储定时器id，避免重复渲染导致的定时器丢失
const scrollTimer = useRef(null)

function handleScroll() {
  // 滚动时立刻显示滚动条
  setShowScrollbar(true)
  // 清除上一次的延迟隐藏任务
  clearTimeout(scrollTimer.current)
  // 滚动停止300ms后隐藏滚动条，时长可自定义调整
  scrollTimer.current = setTimeout(() => {
    setShowScrollbar(false)
  }, 300)
}

// 组件卸载时清除定时器，避免内存泄漏
useEffect(() => {
  return () => clearTimeout(scrollTimer.current)
}, [])

2. 修改DOM类名绑定 #

<div 
  className={`${description} ${!showScrollbar ? 'des' : ""}`} 
  id={classes.des} 
  onScroll={handleScroll}
>
<!-- 内容区域 -->
</div>

3. 优化CSS避免布局重排 #

将原来的display: none切换改为透明度控制，保留滚动条固定占位，彻底消除布局跳动导致的闪烁：

.description::-webkit-scrollbar {
  width: 6px; /* 固定滚动条宽度，始终占位避免布局变化 */
}
.description::-webkit-scrollbar-thumb {
  background: #ccc; /* 可自定义滑块颜色 */
  border-radius: 3px;
  transition: opacity 0.2s ease; /* 加过渡效果更流畅 */
  opacity: 0;
}
/* 显示滚动条时将滑块透明度设为1 */
.description:not(.des)::-webkit-scrollbar-thumb {
  opacity: 1;
}

.description {
  background-color: $color-card-backgroung;
  padding: 12px;
  flex: 1;
  height: 100%;
  text-align: left;
  overflow-y: auto; /* 内容不足时自动隐藏滚动条占位，可选替换为scroll */

  & > label:last-child {
    font-size: 1.125rem !important;
    color: $color-primary-7 !important;
  }

  & > label:nth-child(2) {
    margin-top: 16px;
  }
}

如需兼容Firefox，可在.description样式中额外添加：

scrollbar-width: thin;
scrollbar-color: #ccc transparent;

内容的提问来源于stack exchange，提问作者Pratham Sampat