Hide vertical scroll (overflow)

Ask us anything
1

I have a container that is holding a collection of users.
I want to show the scroll bar for the horizontal overflow but hide the scroll bar for the vertical overflow.

The header row and main collection list are grouped within a container.
If I allow overflow for the collection list, it’ll scroll independent to the header.

image
image1899×716 91.2 KB

If I allow overflow on the main container, the header will scroll horizontally with the list but it’ll also scroll vertically when ideally it should be sticky/fixed.

image
image1903×620 96 KB

image
image1898×653 100 KB

What’s the best way to arrange this?

2

Hi @rory :wave:

Here’s a video that goes into detail about how the overflow property works, using the complexity of the table element as an example:

Does it help?

1 Like
4

@Joyce But by using overflow:hidden; it is then not possible to scroll anymore… What if we want to allow scrolling while not displaying scrollbars?

5

You need to add custom CSS, something like this:

2 Likes
6

You can use CSS

scrollbar-width: none;

Reference link: