Горизонтальная прокрутка перемещает все тело при переполнении-x = прокрутка - PullRequest
Новая
       132

Горизонтальная прокрутка перемещает все тело при переполнении-x = прокрутка

0 голосов
/ 04 августа 2020

Я пытаюсь создать компонент с возможностью горизонтальной прокрутки и загружает изображение для Maincontainer, отрисовывается нормально, но когда я прокручиваю под страницей, вся страница прокручивается вправо. Пожалуйста, дайте мне знать, как решить эту проблему ..

Компоненты галереи изображений 

      <MainContainer>
        <SliderContainer>
          {PiattoImages.map((product, index) => {
            return (
              <>
                <ImageContainer ref={addToRefs}>
                  <img
                    key={index}
                    style={{
                      width: '300px',
                      height: '200px',
                      borderRadius: '25px',
                      aspectRatio: '16:9',
                      imageRendering: 'crisp-edges'
                    }}
                    src={product.productImageURL}
                  />
                </ImageContainer>
              </>
            );
          })}
        </SliderContainer>
      </MainContainer>

Стилизованные компоненты / CSS: 


export const SliderContainer = styled.div`
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
`;

export const ImageContainer = styled.div`
  padding: 5px;
`;

export const MainContainer = styled.div`
  width: 100%;
  overflow-x: scroll;
`;
...