# Hide vertical scroll (overflow)

**URL:** <https://community.weweb.io/t/hide-vertical-scroll-overflow/5093>\
**Category:** Ask us anything\
**Created:** [October 27, 2023, 1:51pm UTC](https://community.weweb.io/t/hide-vertical-scroll-overflow/5093 "2023-10-27T13:51:03Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rory](https://avatars.discourse-cdn.com/v4/letter/r/a183cd/32.png) [@rory](https://community.weweb.io/u/rory)\
**Post date:** [October 27, 2023, 1:51pm UTC](https://community.weweb.io/t/hide-vertical-scroll-overflow/5093/1 "2023-10-27T13:51:03Z")

</div>

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/f/fe930554180561a1fa911449f8bfa7732b14c205.png)

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](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/d/d98652a65008e1b1343378726dae916978f4ed58.png)

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/4/4af2a4c925f826cd9008757c2ca3d30aa93692c2.png)

What’s the best way to arrange this?

---

<div class="post-metadata">

**Author:** ![Joyce](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/joyce/32/13232_2.png) [@Joyce](https://community.weweb.io/u/Joyce)\
**Post date:** [October 27, 2023, 10:05pm UTC](https://community.weweb.io/t/hide-vertical-scroll-overflow/5093/2 "2023-10-27T22:05:15Z")

</div>

Hi @rory 👋

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

[![](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/9/98f23216c554cf8bed1781a85b7ca5a1bfb4e72e.jpeg "Add scroll bars using the CSS overflow property") ](https://www.youtube.com/watch?v=syStR4SpLv0)

Does it help?

---

<div class="post-metadata">

**Author:** ![unlustucru](https://avatars.discourse-cdn.com/v4/letter/u/e36b37/32.png) [@unlustucru](https://community.weweb.io/u/unlustucru)\
**Post date:** [February 18, 2024, 8:17pm UTC](https://community.weweb.io/t/hide-vertical-scroll-overflow/5093/4 "2024-02-18T20:17:03Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [February 18, 2024, 8:26pm UTC](https://community.weweb.io/t/hide-vertical-scroll-overflow/5093/5 "2024-02-18T20:26:30Z")

</div>

You need to add custom CSS, something like this:

> **[Hide scroll bar, while still being able to scroll](https://sentry.io/answers/hide-scroll-bar-but-while-still-being-able-to-scroll/)**
>
> The Problem You want to hide a page or page element scrollbar while still allowing scrolling; how do you do this? You may want to do this to improve the UI of a…

---

<div class="post-metadata">

**Author:** ![nico](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/nico/32/12975_2.png) [@nico](https://community.weweb.io/u/nico)\
**Post date:** [March 29, 2024, 6:30pm UTC](https://community.weweb.io/t/hide-vertical-scroll-overflow/5093/6 "2024-03-29T18:30:43Z")

</div>

You can use CSS

scrollbar-width: none;

Reference link:

> **[Using CSS to hide scrollbars without impacting scrolling - LogRocket Blog](https://blog.logrocket.com/hide-scrollbar-without-impacting-scrolling-css/)**
>
> Learn how to use CSS to hide the scrollbar in different browsers, including WebKit-based browsers, Internet Explorer, and Firefox.