Как лучше всего реализовать горизонтальную прокрутку списка в reactJS? А также могу ли я использовать getElementById в коде реакции?

Question

Мне нужно реализовать горизонтальную прокрутку для списка элементов, но с помощью кнопок со стрелками назад и вперед. Ниже приводится то, что я реализовал, но я хочу знать, есть ли другой лучший способ сделать это с помощью REFS.

  const scrollLeft = () => {
     let scrollPosition = document.getElementById('buttonRow')?.scrollLeft;
     if (scrollPosition) {
     scrollPosition = scrollPosition - 80;
     document.getElementById('buttonRow')?.scroll({ left: scrollPosition, behavior: 'smooth' 
      });
    }
  };

const scrollRight = () => {
  let scrollPosition = document.getElementById('buttonRow')?.scrollLeft;
  if (scrollPosition || scrollPosition === 0) {
  scrollPosition = scrollPosition + 80;
  document
    .getElementById('buttonRow')
    ?.scroll({ left: scrollPosition, behavior: 'smooth' });
  }
};

#Pivots types are array i am using, which i want to display.
let PivotTypes = ['item1', 'item2', 'item3', 'item4']

Это мой jsx

        <LeftArrowButton onClick={() => scrollLeft()}>
          <StyledLeftArrow />
        </LeftArrowButton>
        <InlineContainer>
          <ButtonRow id="buttonRow">
            {PivotTypes.map(pivotType => {
              return (
                <PivotButton
                  style={{
                    backgroundColor: activePivots.some(
                      pivot => pivot === pivotType
                    )
                      ? '#00a1de'
                      : '#8b8b8b',
                  }}
                  id={pivotType + 'PivotButton'}
                >
                  {pivotType}
                </PivotButton>
              );
            })}
          </ButtonRow>
        </InlineContainer>
        <RightArrowButton onClick={() => scrollRight()}>
          <StyledRightArrow />
        </RightArrowButton>

Это работает, но я не доволен реализацией, так как у нее есть getElementById, который, как мне кажется, не реагирует на это: /

Примечание: для пользовательского интерфейса я использую пакет @ material-ui / core

UI выглядит примерно так введите описание изображения здесь

** Мы будем благодарны за любые предложения / отзывы.

Answer 1

Если я правильно понимаю, вы просто хотите добавить горизонтальную прокрутку к своему тегу html.

Для этого вы можете использовать css.

overflow-x:scroll;