How to Hide Scrollbar in CSS?

Scrollbars can sometimes interfere with a website’s design, especially in custom-styled layouts or when creating smooth scrolling effects. Fortunately, CSS provides multiple ways to hide scrollbars while keeping content scrollable.

In this blog, we’ll explore different methods to hide scrollbars for various browsers and use cases.

1. Hiding the Scrollbar While Keeping Scrolling Enabled

If you want to hide the scrollbar but still allow users to scroll, use the following CSS:

For WebKit Browsers (Chrome, Safari, Edge)

.element::-webkit-scrollbar {
    display: none; /* Hides scrollbar */
}

.element {
    overflow: auto; /* Enables scrolling */
    -ms-overflow-style: none; /* Hides scrollbar in IE and Edge */
    scrollbar-width: none; /* Hides scrollbar in Firefox */
}

✔ This method removes the scrollbar while keeping the content scrollable.

2. Completely Disabling Scrolling

If you want to disable scrolling completely, use overflow: hidden;:

body {
    overflow: hidden;
}

✔ This prevents both vertical and horizontal scrolling on the entire page.

3. Hiding Only the Vertical or Horizontal Scrollbar

If you need to hide only one scrollbar, use these properties:

Hide Vertical Scrollbar

.element {
    overflow-y: hidden;
    overflow-x: auto; /* Allows horizontal scrolling */
}

Hide Horizontal Scrollbar

.element {
    overflow-x: hidden;
    overflow-y: auto; /* Allows vertical scrolling */
}

✔ This approach is useful for hiding scrollbars in specific directions while keeping scrolling enabled in the other direction.

4. Hiding Scrollbars Only When Not Scrolling

If you want the scrollbar to appear only when scrolling, use scrollbar-gutter: stable;:

.element {
    overflow: auto;
    scrollbar-gutter: stable;
}

✔ This maintains layout consistency by reserving space for the scrollbar but hides it when not in use.

5. Using JavaScript for Dynamic Scrollbar Control

For more control, use JavaScript to toggle scrollbars dynamically:

document.body.style.overflow = "hidden"; // Hide scrollbar
document.body.style.overflow = "auto"; // Show scrollbar

✔ This method is useful for modals, sidebars, or pop-ups.

Conclusion

To hide scrollbars in CSS:

✔ Use ::-webkit-scrollbar { display: none; } for WebKit browsers.
✔ Use overflow: hidden; to disable scrolling entirely.
✔ Use overflow-x or overflow-y to hide specific scrollbars.
✔ Use scrollbar-gutter: stable; to hide scrollbars when not in use.
✔ Use JavaScript for dynamic scrollbar control.