javascript - 单击按钮时水平 react 滚动组件

Question

我目前正在构建一个卡片部分，其中显示卡片的水平列表。此列表溢出，这使得用户必须水平滚动才能查看屏幕外的卡片。

为了让用户更轻松地完成此过程，我想创建向左或向右滚动水平列表的按钮。

我尝试通过创建对水平列表的引用来解决这个问题，并在单击前面提到的按钮时应用scrollX。然而，这会导致以下错误:

Cannot add property scrollX, object is not extensible

我的代码:

const ref = useRef(null);

const scroll = () => {
  ref.scrollX += 20;
};

return (
  <div className={style.wrapper} id={id}>
    <Container className={style.container}>
      <Row>
        <Col>
          <button onClick={scroll}>TEST</button>
        </Col>
      </Row>
    </Container>
    <div className={style.projects} ref={ref}>
      {projects.map((data, index) => (
        <CardProject
          key={index}
          title={data.title}
          image={data.image}
          description={data.description}
        />
      ))}
    </div>
  </div>
);

Answer 1

为了使用 Ref 访问 DOM 节点，您需要使用 ref.current； useRef 是 DOM 节点的容器，您可以使用 current 属性访问该节点。

此外，scrollX 是一个只读属性；您需要调用 scrollLeft 来更改滚动位置。要使 scrollLeft 正常工作，您需要向 style.projects 添加一个 overflow-x:scroll; 规则才能正常工作。 (如果 style.projects 是一个对象，则更改为 overflowX: 'scroll'。)

为了能够向左或向右滚动，您可以向滚动偏移量的函数添加一个参数，这样它就不会总是向右滚动:

const scroll = (scrollOffset) => {
  ref.current.scrollLeft += scrollOffset;
};

为此，您需要在 JSX 中使用两个按钮，将左侧或右侧的偏移值传递给滚动函数:

 <Row>
        <Col>
          <button onClick={() => scroll(-20)}>LEFT</button>
          <button onClick={() => scroll(20)}>RIGHT</button>
        </Col>
  </Row>