react-horizontal-scrolling-menu 滚动错误

Question

**你好，我遇到了 react-horizontal-scrolling-menu 的问题 ，滚动的时候，向右滚动了很多，剩下的元素就消失了，当你在BOX里加上overflowX: 'scroll'，第一次点击后，滚动才生效

加上 LeftArrow、RightArrow 不起作用

看看代码**

[此处错误img]

<Box component="div" sx={{position:'relative', width:'100%',p:'20px'}}>
        <HorizontalScrollbar data={bodyParts} bodyParts={bodyParts} bodyPart={bodyPart} setBodyPart={setBodyPart}/>
  </Box>

水平滚动条

  import React, { useContext } from 'react';
import { ScrollMenu, VisibilityContext } from 'react-horizontal-scrolling-menu';
import { Box, Typography } from '@mui/material';
import BodyPart from './BodyPart';
import RightArrowIcon from '../assets/icons/right-arrow.png';
import LeftArrowIcon from '../assets/icons/left-arrow.png';

const LeftArrow = () => {
  const { scrollPrev } = useContext(VisibilityContext);

  return (
    <Typography onClick={() => scrollPrev()} className="right-arrow">
      <img src={LeftArrowIcon} alt="right-arrow" />
    </Typography>
  );
};

const RightArrow = () => {
  const { scrollNext } = useContext(VisibilityContext);

  return (
    <Typography onClick={() => scrollNext()} className="left-arrow" >
      <img src={RightArrowIcon} alt="right-arrow"/>
    </Typography>
  );
};

const HorizontalScrollbar = ({ data, bodyParts, setBodyPart, bodyPart }) => (
  <Box mt={4} sx={{position:'static'}}>
  <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
    {data.map((item) => (
      <Box
        key={item.id || item}
        itemId={item.id || item}
        title={item.id || item}
        m="0 40px"
      >
         <BodyPart item={item} setBodyPart={setBodyPart} bodyPart={bodyPart} /> 
      </Box>
    ))}
  </ScrollMenu>
  </Box>
);

export default HorizontalScrollbar;

Answer 1

安装 npm i [email protected]，最新的 3.0.1 版本有一些关于 overflow 的问题

Answer 2

我也被困在这里，但我做了一些修改以继续前进，就像我刚刚从 git 中复制了 package.json（描述中提到了链接）并运行命令“npm install”，它开始工作。

我建议你也这样做，这样你就可以移动并在安装后查找错误或问题 快乐学习

Answer 3

使用按钮而不是排版：

const LeftArrow = () => {
  const { scrollPrev } = useContext(VisibilityContext);

  return (
    <Button onClick={() => scrollPrev()} className="right-arrow">
      <img src={LeftArrowIcon} alt="right-arrow" />
    </Button>
  );
};

这按预期工作。

Answer 4

我在做同一个项目，但我遇到了一些错误

对我有用：

npm i [email protected]