CSS: How To Hide Scrollbar But Still Scroll

Sometimes you need to disable the scrollbar but still be able to scroll content.

This is especially true for UIs designed for mobile devices with touch screen.

There are multiple ways to hide scrollbar, but they might not all work in all browsers.

Important: always make sure to test hidden scrollbar on different devices, as this is one of the few CSS properties that isn't implemented 100% the same in different browsers. Especially if you're developing a PWA or a hybrid webapp mobile app.

How to remove scrollbar but still scroll

To remove the scrollbar but still allow scrolling in CSS, you can use the overflow property and set it to scroll for the element that has a scrollbar.

How to hide scrollbar in webkit-based browsers

You can then use the ::-webkit-scrollbar pseudo-element to hide the scrollbar in webkit-based browsers (e.g. Chrome and Safari). Here is an example:

::-webkit-scrollbar {
  display: none;
}

div.container {
  overflow: scroll;
}

Note that the ::-webkit-scrollbar pseudo-element is only supported in webkit-based browsers, so you will need to use a different approach for other browsers.

For example, in Firefox you can use the scrollbar-width property to control the width of the scrollbar, and set it to none to hide it.

How to hide scrollbar in Firefox

Here is an example:

div.container {
  scrollbar-width: none;
}

Alternatively, you can use a JavaScript library like jQuery to hide the scrollbar in all browsers.

Here is an example using jQuery:

How to hide scrollbar in all browsers using CSS

$(document).ready(function() {
  $('div.container').css({'overflow': 'scroll', 'scrollbar-width': 'none'});
});

You've probably already tried:

overflow:hidden;

This hides the scrollbar, and disables the scrollbar function.

We want to keep ability to scroll content.

Applying display:none to ::webkit-scrollbar the scrollbar only works in Chrome:

::-webkit-scrollbar {
    display: none;
}

But this doesn't work in Firefox.

Here is a simple example that will work in all browsers:

.container {
    overflow-y: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.container::-webkit-scrollbar {
    width: 0;
    height: 0;
}

If you want to remove horizontal scrollbar, simply replace overflow-y with overflow-x.

How to remove vertical scrollbar but still scroll (solution 1)

Here's one example of hiding scrollbar while retaining scroll function:

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px;
    box-sizing: content-box;
}

How to hide vertical scrollbar but still scroll (solution 2)

#parent {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px;
    overflow-y: scroll;
}

Keywords you might be typing to find this content

1. How to hide scrollbar but allow scroll?
2. CSS hide scrollbar on mobile
3. CSS hide scrollbar all browsers
4. CSS hide scrollbar but can scroll