轮播组件滚动检测异常：Tab键触发滚动未被识别

你的核心问题是：Tab键触发轮播原生滚动时，scrollDistance状态没变化，导致依赖它的useEffect不会执行，按钮的显示/隐藏状态也就无法更新。

当前代码里的useEffect只在documentCategories或scrollDistance变化时运行，但Tab键滚动是浏览器原生的滚动行为，不会修改你维护的scrollDistance状态，所以检测逻辑根本没触发。

修复方案 #

把滚动检测逻辑绑定到轮播容器的scroll事件上，同时保留原有的依赖监听，确保内容更新时也能重新计算：

useEffect(() => {
  const box = document.getElementById("musterOverviewDocumentChecklist");
  if (!box) return;

  // 定义滚动检测函数
  const checkScrollState = () => {
    const width = box.offsetWidth;
    // 直接取容器原生滚动距离，替代自定义的scrollDistance
    setCanScrollLeft(box.scrollLeft <= 0);
    setCanScrollRight(
      box.scrollLeft >= (documentCategories.documents.length + 1) * 210 - width
    );
  };

  // 初始化时先执行一次检测
  checkScrollState();

  // 绑定scroll事件，实时监听滚动行为
  box.addEventListener("scroll", checkScrollState);

  // 组件卸载时移除监听，避免内存泄漏
  return () => box.removeEventListener("scroll", checkScrollState);
}, [documentCategories]); // 仅依赖内容数据，滚动事件会实时触发检测

关键改动点 #

• 监听容器原生scroll事件：不管是点击按钮、Tab键聚焦滚动，还是鼠标滚轮滚动，只要容器滚动就会触发状态更新
• 用box.scrollLeft替代scrollDistance：原生滚动的真实距离存在这个属性里，能准确反映当前滚动位置
• 增加清理逻辑：组件卸载时移除事件监听，避免不必要的内存占用

这样修改后，所有滚动场景下按钮的显示/隐藏状态都会实时同步。

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