Hiding A Scrollbar

Hiding the scrollbar is not the best thing to do from a UX perspective, but sometimes it's what you need for your site layout.

Charlene Abranilla avatar
Written by Charlene Abranilla
Updated over a week ago

Hiding the scrollbar is not always the best thing to do from a User Experience perspective, but sometimes it's exactly what you need to get your site the way you want.

To hide the scrollbar in CSS, you can use overflow: hidden in your CSS, like this:

body { overflow: hidden; }

This will hide the scrollbar on the body element. Note that this will also disable scrolling on the page, so if you want to enable scrolling but hide the scrollbar, you can use overflow: scroll instead, like this:

body { overflow: scroll; }

This will create a scrollbar on the page, but it will be hidden by default. When the user scrolls, the scrollbar will appear. You can also use overflow-x and overflow-y to hide the scrollbar on either the horizontal or vertical axis, like this:

body { overflow-x: hidden; overflow-y: scroll; }

This will hide the horizontal scrollbar and show the vertical scrollbar.


Did this answer your question?