ScrollWrap

The <ScrollWrap /> is a wrapper component that is used to give a visual indicator that an area can be scrolled horizontally. It allows x-axis scrolling and adds styles and a button to indicate that the container is scrollable.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Scroll RightScroll
Show codeCopy code

The "Scroll" button is an additional visual aid to highlight that the container has overflowing content. It is only displayed before the user has scrolled.

In some cases, e.g. when the height of the horizontally overflowing element is limited, the "Scroll" button might be redundant. Use the hideScrollButton prop to hide the button.

PlaygroundHide scroll button
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Show codeCopy code