React horizontal scrolling menu组件滚动箭头失效问题

左右滚动箭头点击无响应是react-horizontal-scrolling-menu库的高频问题，通常由上下文读取失败、元素宽度计算错误、点击事件被遮挡三类原因导致，按以下步骤排查修复即可：

第一步：先确认点击事件是否正常触发 #

先给两个箭头的点击回调加日志，快速定位问题类型：

const LeftArrow = () => {
  const { scrollPrev } = React.useContext(VisibilityContext);
  return (
    <Typography 
      onClick={() => {
        console.log('点击左箭头', scrollPrev);
        scrollPrev();
      }} 
      px={2}
      sx={{ zIndex: 10, position: 'relative', cursor: 'pointer' }}
    >
      <img src={LeftArrowImage} className="left-arrow" alt="left-arrow" />
    </Typography>
  );
};

const RightArrow = () => {
  const { scrollNext } = React.useContext(VisibilityContext);
  return (
    <Typography 
      onClick={() => {
        console.log('点击右箭头', scrollNext);
        scrollNext();
      }} 
      px={2}
      sx={{ zIndex: 10, position: 'relative', cursor: 'pointer' }}
    >
      <img src={RightArrowImage} className="right-arrow" alt="right-arrow" />
    </Typography>
  );
};

点击箭头后看控制台输出，对应解决：

• 如果没有打印日志：说明点击事件被遮挡，检查自定义的left-arrow/right-arrow类CSS，有没有设置pointer-events: none，有则直接删除；确认没有其他透明定位元素覆盖在箭头上方。
• 如果打印出scrollPrev/scrollNext是undefined：说明上下文读取失败，把LeftArrow、RightArrow两个组件的定义移动到HorizontalScrollbar组件内部，不要放在模块顶层定义，部分版本的库不支持顶层组件读取VisibilityContext。
• 如果打印出是正常函数，但页面没有滚动：属于宽度计算错误，按第二步修复。

第二步：修复宽度计算错误（90%场景下的根因） #

这个库必须准确拿到「滚动容器宽度」和「所有菜单项总宽度」才能计算滚动距离，任意一个值计算错误都会导致点击箭头无反应，修复以下配置：

1. 给ScrollMenu的父容器加明确的宽度约束，修改包裹ScrollMenu的Box：

<Box mt={4} sx={{ display: { md: "block", xs: "none" }, width: "100%", overflow: "hidden" }}>

2. 给每个菜单项（map渲染的Box）设置明确的最小宽度，避免元素宽度塌陷导致库无法读取正确尺寸，同时确保itemId全局唯一：

{items.map((item) => (
  <Box
    itemId={item.id} 
    title={item.id}
    key={item.id}
    sx={{ minWidth: "320px", margin: "0 12px" }} // 按业务需求调整宽度即可
  >
    {test ? <Testimonial item={item} /> :  <Project item={item} />}
  </Box>
))}

3. 如果你配置了md及以上尺寸才显示菜单，建议用MUI的useMediaQuery（从@mui/material直接导入）获取断点状态，给ScrollMenu绑定动态key，断点切换时重新渲染组件，触发库重新计算宽度：

// 在HorizontalScrollbar组件顶部调用
const isMdUp = useMediaQuery((theme) => theme.breakpoints.up('md'));

// 给ScrollMenu添加key属性
<ScrollMenu 
  LeftArrow={LeftArrow} 
  RightArrow={RightArrow}
  key={isMdUp ? 'md-scroll-menu' : 'hidden'}
>

附带小问题修复 #

你现有代码里有几处不影响滚动、但会引发样式/资源异常的问题，顺手修正即可：

• 左箭头img的className从right-arrow改成left-arrow，alt从right-arrow改成left-arrow
• 右箭头img的className从left-arrow改成right-arrow
• 检查右箭头图片路径"right arrow .png"里的多余空格，避免部署时资源404

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