Реагировать горизонтально на компонент прокрутки при нажатии кнопки

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

Чтобы получить доступ к узлу DOM с помощью ссылки, вам нужно использовать ref.current; useRef - это контейнер для узла DOM, и вы обращаетесь к этому узлу с помощью свойства current.

Кроме того, scrollX является свойством только для чтения; вам нужно позвонить scrollLeft, чтобы изменить положение прокрутки. Чтобы scrollLeft работал, вам нужно добавить правило overflow-x: scroll; к style.projects, чтобы оно заработало. (Если 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>