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>
);

- Jonathan Lauwers

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中需要两个按钮，将左侧或右侧的偏移值传递给滚动函数：

要想实现这一点，您需要在JSX中拥有两个按钮，用于向滚动函数传递左或右的偏移值：

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

- litel

---

这个滚动行为也可以变得平滑吗？ - Jonathan Lauwers

您可以在 style.projects 的 CSS 中添加 scroll-behavior: smooth;，但这在 Safari 中不被原生支持，所以您需要使用一些 polyfill，比如 https://github.com/iamdustan/smoothscroll。 - litel

这个有效吗？我尝试过了，但并没有按预期工作。 - Prieyudha Akadita S