How to hide scrollbars while scrolling using CSS?

Hide scrollbars with CSS: In this tutorial, we will learn how to hide scrollbars while scrolling using CSS. By Anjali Singh Last updated : July 10, 2023

Introduction

It is always nice to have a responsive website or web page, to create such websites or web pages we have to make use of our developing skills to a great extent to bring about the functionality as well as the appearance of the web page or website. CSS helps in making such tasks easy, as CSS is used for styling and various style attributes are used profoundly to create a very responsive yet attractive website or web page. Anyone can create websites or web pages with ample knowledge but all the creative and unique websites or web pages demand something beyond the fundamental knowledge skills.

As we know, we can use CSS for styling our web page or website therefore the topic of this section is also related to CSS. So let us keep moving and see how can we hide scroll bars while using CSS, which would be very cool, right? So how do we do that? Is there a method? Is there a particular property to do it? Well, if you are wondering if there is a certain property to achieve this then you are correct. Let us have a look at this property!

CSS property to hide scrollbars

To hide the scroll bar you may use -WebKit- and display it to none. Well, why only WebKit? The answer to that is that WebKit property is supported by a large group of browsers, for example, chrome, safari, etc. Therefore it would be convenient to implement WebKit property if you are planning to hide the scroll bar. Although there are properties for different browsers which are listed below,

For Firefox you can use -Moz-.
For Internet Explorer, you can use -ms-.

Note:

It would be pretty cool if we can hide our scroll bar while scrolling but there are some very crucial points that you must consider before proceeding to implement this method.

You should prefer to hide the scroll bar only when you are sure that the content of your website or web page would still be visible to the user because the user might skip the content.
You should try to avoid horizontal scrolling on your web pages or websites and you must also try to avoid hiding horizontal scroll bars, as it becomes difficult to read the content.
Even if you still want to hide the scroll bar, then place all the important information about the web page or web site above the fold.

Syntax to hide hide scrollbars with CSS

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

Example to hide scrollbars with CSS

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            background-color: #f40;
            color: #fff;
            width: 200px;
            height: 200px;
            border: 1px dotted black;
            overflow-y: scroll;
        }
        
        div::-webkit-scrollbar {
            display: none;
        }
    </style>
</head>

<body>
    <h2>Hide scrollbar while scrolling</h2>
    <p>Scroll the below div element</p>
    <div>
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp. 
      This is includeHelp. This is includeHelp. This is includeHelp.
    </div>
</body>

</html>

Output

In the above example, try to run the code and scroll the content inside the div element.

CSS Examples »

How to display XML using CSS?

How to prevent line breaks in the list of items using CSS?