0

I have to implement horizontal scroll for the list of items but with the back and forward arrow button. Following is what i implemented but i want to know if there is another best way to do it may be by using 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']

This is my 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>

This works but I am not happy with the implementation as it has getElementById, which i feel is not react way of doing it :/

Note: for ui i am using @material-ui/core package

UI is something like this enter image description here

**Any suggession / feedback will be appreciated.

Irfan Pathan
  • 309
  • 1
  • 3
  • 14

1 Answers1

0

If I'm understanding correctly you just want to add a horizontal scroll to your html tag.

To do that you can use css.

overflow-x:scroll;

Ryan Hinchliffe
  • 167
  • 1
  • 7
  • I know that but its not just the scroll , it kind of slider with left and right icon buttons on left and right side of the list respectively. And onclick of this icon buttons list should scroll horizontally. and also even without clicking on this button it should slide using mouse scroller. Hope i made it clear now? – Irfan Pathan Jul 10 '20 at 08:31
  • I think what you are asking for is a carousel. if you are using bootstrap there are some examples here: https://getbootstrap.com/docs/4.0/components/carousel/ – Ryan Hinchliffe Jul 10 '20 at 12:32
  • But carousal will show one item in the the list at a time but I want to show multiple item until it is within the container and then scroll. – Irfan Pathan Jul 13 '20 at 04:55