How To Hide Scrollbars With CSS?

Hide the Scrollbar in CSS but Allow Scrolling?

Hiding the scrollbar yet allowing the user to scroll can be challenging as there is no rule especially designed to achieve this feature. Yet, certain properties of CSS are limited to different browsers that help to achieve this functionality. 

CSS supports different properties and provides pseudo-classes that help in implementing this feature. The properties may differ from browser to browser as not all browsers support all the properties of CSS. 

element_class {
ms-overflow-style: none;
scrollbar-width: none;
overflow-y: scroll;
}
element_class:: webkit-scrollbar{
display: none;
} 

The above code helps to hide the scrollbar yet allows users to scroll on the webpage. The overflow-y property is set to scroll which provides the user with the functionality to scroll through the webpage. The above different properties are specific to the browser and are discussed below:

ms-overflow-style: This property is only supported by Edge and Internet Explorer browsers.
 

scrollbar-width: This property is supported by the Firefox browser. 
 

display: This property is supported by Chrome, Opera, and Safari. 

Methods to Hide Scrollbar

There are different methods and properties of CSS that can be used to hide scrollbar in the webpages. 

Method 1 : Disable the Vertical Scrollbar 

To hide the vertical scrollbar in the web pages, the CSS overflow-y property is set to hidden. 

.vertical_scrollbar{
overflow-y: hidden;
}

There are instances where you may want the scrollbar to be available on the webpage, but not visible at all times. When hover is done on the webpage, visibility of the scrollbar can be done by using the pseudo-classes active, focus, and overwriting the overflow-y property. 
Below is the code for implementing this: 

<div class= "custom_content">
//write content here

</div>

.custom_content{
max-width: 500px;
max:height: 400px;
overflow-y:hidden;
}

When the user hovers in the scrollable content, visibility of the scrollbar is performed using the below code: 

.custom_content: hover;
.custom_content: active;
.custom_conten: focus{
overflow-y: scroll;
}

The hover, active, and focus pseudo-classes work with different states of elements. When any of the above states occurs, the CSS property makes the vertical content scroll by overwriting the overflow-y property as scroll. 

Method 2 : Disable the Horizontal Scrollbar 

To hide the horizontal scrollbar in the web pages, the CSS overflow-x property is set to hidden. 

.horizontal_scrollbar{
overflow-x: hidden;
}

To enable the horizontal scrollbar only when an element is hovered or focused below code can be implemented. 

<div class= "custom_content">
//write content here

</div>
.custom_content {
  max-width: 500px;
  max-height: 400px;
  overflow-x: hidden;
}


.custom_content:hover,
.custom_content:active,
.custom_content:focus {
  overflow-x: scroll; 
}

Method 3 : Disable Both Vertical and Horizontal Scrollbar 

To hide the horizontal scrollbar in the web pages, the CSS overflow property is set to hidden. 

.no_scrollbar{
overflow: hidden;
}

Using these methods is not suggested as they disrupt the basic accessibility of the webpage. There are various CSS pseudo-selectors that are used to hide these scrollbars. These features of CSS help in hiding the scrollbar. 

Common used  pseudo-selectors are: 

1. -webkit-scrollbar
    
2. Scrollbar-width

Hiding the Scrollbar on the Basis of Web Browsers

Each browser has its own properties and supports different selectors. The webkit-scrollbar feature provides a huge variety of options to customize the scrollbar. This webkit-scrollbar is used in Opera, Chrome, Edge, and many other browsers. However, this is not a standard way of hiding the scroll bar as it limits the category of browsers. 

There are various segments in which the webkit scrollbar can be used like changing the color of the scrollbar, scrolling up and down arrows, changing the background color, width modification, and many more using these pseudo-elements. 

Below is the code for hiding the scrollbar in the browser while still the functionality can be performed using mouse and keyboard. 

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

Other functionalities like changing the background color, width, and hover color can be performed using the below codes. 

.class_name:: webkit-scrollbar-track{
background-color: #f66;
.class_name:: webkit-scrollbar{
width: 5px;
.class_name:: webkit-scrollbar-thumb{
background-color: #ccc;

Example 

Let’s implement these properties to hide the scrollbar in the class. 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Example</title>

    <style>

        .wrapper,

        .bordered-area {

            width: 300px;

            height: 200px;

            background-color: blue; 

            color: white;

            padding: 15px;

            text-align: justify;

            border: 3px solid #333; 

            position: relative;

            overflow: hidden; /* Hides overflow content */

        }

        .scroll-section {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            overflow-y: auto; /* Enables vertical scrolling */

            padding-right: 15px; /* To prevent content from touching the edge */

        }

        /* Hiding the scrollbar for WebKit browsers */

        .scroll-section::-webkit-scrollbar {

            display: none; /* Hides the scrollbar */

        }

        /* Hiding the scrollbar for other browsers */

        .scroll-section {

            scrollbar-width: none; /* Firefox */

        }

    </style>

</head>

<body>

    <div class="bordered-area">

        <div class="scroll-section">

            <p>

                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ac metus non massa gravida laoreet.

                Fusce nec velit ante. Aenean vel tincidunt massa, ac convallis nisl. Curabitur gravida, leo in

                sollicitudin interdum, orci nulla dapibus lectus, a varius nunc justo nec sapien. Suspendisse

                potenti. Integer ultricies feugiat dolor, et convallis velit posuere nec.

            </p>

            <p>

                Integer non fermentum justo. Suspendisse potenti. Donec quis metus neque. Mauris tincidunt elit

                sit amet turpis viverra, at pellentesque felis interdum. Aliquam erat volutpat. Nulla vehicula

                cursus nulla, ut egestas nunc faucibus id.

            </p>

        </div>

    </div>

</body>

</html>

Output

Browsers specific

Microsoft Edge 

If you do not wish to use webkit-scrollbar you can also use the CSS pseudo selector -ms-overflow-style that controls the scrollbar visibility. Remember, this pseudo selector is limited to Microsoft Edge and Internet Explorer as other browsers do not support this selector. 

.class_name {

-ms-overflow-style: none; 
}

Gecko-Based Browsers

For browsers like Firefox, the scrollbar-width property can be used to control the visibility of the scrollbar. This property can be used in multiple browsers and is a standard procedure for hiding the scrollbar using CSS. 

.class_name{
scrollbar-width: none;
}

Using overflow:auto to Hode scrollbar 

In some cases, removing the scrollbar can interrupt the user experience. The understanding that hiding the scrollbar will improve your design can also be harmful. Users have the habit of looking for the traditional way before they get habitual to the new design. They look for a visible scrollbar to scroll the content as they tend to provide them with the idea of how much content is left to be read until and unless an infinite scrollbar is implemented. 
To achieve this functionality, hiding the scrollbar until the user starts scrolling can be achieved using the CSS overflow property. Set the overflow property as auto will enable to hide the scrollbar only when user starts scrolling. 

Below is an example to better understand this feature. 

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Example</title>

    <style>

        .container {

            width: 300px; 

            height: 150px; 

            border: 2px solid #333; 

            padding: 10px;

            overflow: auto; /* Enable scrollbars if content overflows */

            background-color: yellow; 

        }

        .content {

            height: 200px; 

            background-color: orange;

            color: white;

            padding: 10px;

            box-sizing: border-box;

        }

    </style>

</head>

<body>

    <div class="container">

        <div class="content">

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sit amet accumsan arcu. 

            Sed nec fringilla velit. In hac habitasse platea dictumst. Mauris bibendum, nunc in bibendum 

            efficitur, justo elit accumsan elit, vitae interdum erat nisi non eros. Nulla facilisi. 

            Donec tempor libero in leo tincidunt, sed congue sapien efficitur.

        </div>

    </div>

</body>

</html>

Output

Should you use CSS to Hide the Scrollbar?

Using CSS to hide the scrollbar has its own pros and cons. Sometimes, where the webpage scrolling functionality is smooth, it can be difficult or confusing to use. The scrollbar improves the visual appearance of the webpage and provides you with an indication of content length. It also improves the readability of your content by giving larger font sizes. 

The scrollbar can also be an issue when it interferes with other web page elements. It may slow your web page loading time and can cause layout issues. Content position is hindered which later can be confusing. 

Using this functionality depends on the use case. Proper implementation and correct usage can enhance the feature and if implemented incorrectly, can be difficult to understand. 

Frequently Asked Questions

What is the purpose of hiding scrollbars in web design?

There are multiple usage for hiding the scrollbars in the web design. Users tend to have a larger visible screen area and better user experience. It helps to see the hidden content and have better readability. It is mainly used to avoid distraction and used for aesthetic purposes. 

Are hidden scrollbars supported on all browsers?

Modern browsers like Chrome, Safari, and Edge have supported hidden scrollbars using the CSS but universally it is not supported. Older browsers still faces issues to hide the scrollbar which leads to poor display and fallback solution for compatibility. 

How to remove the horizontal scrollbar in CSS?

To remove the horizontal scrollbar in CSS, the overflow-x property is set to be hidden which is used to active the scrollbar in the webpage. This property only removes the horizontal scrollbar thus vertical scrollbar might be visible if not implemented separately. 

Can you style the scrollbar CSS?

 Yes, you can style scrollbars using CSS. Utilize properties like "scrollbar-width," "scrollbar-color," and "scrollbar-track-color" to customize the scrollbar's appearance and enhance the overall design and user experience of your webpage.

Conclusion 

In conclusion, hiding scrollbars using CSS can improve the design and user experience of a webpage. While various methods are available across different browsers, careful implementation is essential to maintain accessibility and usability. Understanding when and how to hide scrollbars can enhance a website's functionality and visual appeal

You can also check out our other blogs on Code360.