How to hide scrollbar in HTML while still being able to scroll

The -webkit-scrollbar CSS property is used to control the scrolling functionality of the HTML element when the overflow property of that element is set to scroll, i.e., overflow: scroll. We can use the display: none CSS property to hide the scrollbar and allow the functionality.

Example

Let's look at the example below:

Code explanation

HTML

• Lines 8–14: We have a div with ID as content. We apply the -webkit-scrollbar property to this HTML element.

CSS

• Lines 1–6: For the div element in HTML, we set the background-color, height, width, and add the ability to scroll overflow-y: scroll.

• Lines 9–11: We get access to the scrollbar using the -webkit-scrollbar CSS property and set the display to none, which indicates not to display the scrollbar while allowing the scroll functionality (works with chrome, safari, and opera).

• Lines 14–17: For other browsers such as Firefox, Internet Explorer and Edge, we set this functionality using scrollbar-width: none; for Firefox and -ms-overflow-style: none; for IE and Edge.