hide scrollbar css

CSS allows us to modify a lot of aspects of the elements on our web page, one of which is the scrollbar. Whether due to design decisions or functional requirements, there might be times when you want to hide the scrollbar.

Code Snippet to Hide Scrollbar

To hide a scrollbar using CSS, you’ll need to target the element in question and use some specific CSS properties. The following snippet demonstrates how you can do this:

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

body {
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
}

Code Explanation for Hiding the Scrollbar

This code will hide the scrollbar on all major browsers (Chrome, Firefox, and Edge). The important thing about this code is understanding what exactly you’re targeting and how you’re hiding the scrollbar.

Firstly, you target the scrollbar using the ::-webkit-scrollbar pseudo-element. This targets the scrollbar in modern WebKit and Blink browsers (Google Chrome, Edge, and others). The display: none; inserted inside this pseudo-element effectively makes the scrollbar invisible.

However, this pseudo-element is not recognized by Firefox, for that we use overflow: -moz-scrollbars-none;. The -moz- prefix is specific to Firefox, and this property tells the browser not to display the scrollbar.

Lastly, for Internet Explorer and Edge 16 and below, we use -ms-overflow-style: none;. This property is specific to Internet Explorer and certain versions of Edge and helps in hiding scrollbar there.

This is how you hide the scrollbar across all major browsers using CSS. Note that even though the scrollbar is hidden, the content is still scrollable. This code just visually hides the scrollbar; it doesn’t disable any functionality.