Hide Scrollbar But Still Scrollable Using CSS

This tutorial will learn you to hide the scrollbar but still scrollable using CSS. Even you will get a standard CSS code with a complete explanation for invisible scrolling the largest content. So, you must read all the given points so that you will completely understand its concept.

hide scrollbar but still scrollable using css

CSS Hide Scrollbar But Still Not Scrollable

As you know that CSS provides overflow: hidden property to hide the scrolling of the largest content. But this property does not have the ability to make scrollable a section.  If you want to stop scrolling & remove the scrollbar horizontally as well as vertically then you can use this property.

Learn More – 

Change Placeholder Color Using CSS

Syntax –

selector_name{
  overflow:hidden
}

You should always remove scrolling from a horizontal using overflow-x: hidden property to increase the readability of the content.

selector_name{
  overflow-x:hidden
}

If you need to hide the vertical scrollbar and stop scrolling the content then you can use the following syntax –

selector_name{
  overflow-y:hidden
}

CSS Hide Scrollbar But Still Scrollable

If you need to hide the scrollbar but still able to scroll then you will have to use one of the following syntaxes of overflow property.

Use this syntax to active the scrolling both horizontally & vertically

selector_name{
overflow: scroll/auto;
}

Use this syntax to active the scrolling only horizontally

selector_name{
overflow-x: scroll/auto;
}

Use this syntax to active the scrolling only vertically

selector_name{
overflow-y: scroll/auto;
}

After that, you can use the following CSS syntaxes to hide the visible scrollbar.

Syntax to hide the scrollbar in chrome, opera, safari –

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

Syntax to hide the scrollbar in Internet Explorer & Microsoft Edge –

.selector_name {
  -ms-overflow-style: none;
}

Syntax to hide the scrollbar in Firebox –

.selector_name { 
 overflow: -moz-scrollbars-none; 
 scrollbar-width: none;
}

Important Points –

You must declare all the above three syntaxes like the following declaration to hide in all type of browsers

selector_name::-webkit-scrollbar {
    display: none;
}
selector_name{
  -ms-overflow-style: none;
   overflow: -moz-scrollbars-none; 
   scrollbar-width: none;
}

Hide Scrollbar But Still Scroll in Body

You can use the following CSS code to hide the scrollbar in the body. Even body content will be scrolled.

body::-webkit-scrollbar {
    display: none;
}
body {
  -ms-overflow-style: none;
   overflow: -moz-scrollbars-none; 
   scrollbar-width: none;
}

Hide Scrollbar But Still Scroll in Div

You can use the following CSS code to hide the scrollbar in the div element. Even div content will be scrolled. Suppose that div is has a class attribute like  class="large-content"

.large-content::-webkit-scrollbar {
    display: none;
}
.large-content{
  -ms-overflow-style: none;
   overflow: -moz-scrollbars-none; 
   scrollbar-width: none;
}

How to Hide Scrollbar But Still Scroll with CSS

To Hide the scrollbar and make scrollable the div content, you will have to understand the following steps. It is only for showing the example How does it work. After learning these steps, you will easily configure it based on your project requirement.

1. Create an HTML Div

First of all, Create an HTML div element with class="hidden-scrollbar" and write some text that must be overflow.

<div class="hidden-scrollbar">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
 </div>

 

2. Write CSS Code

Use the following CSS code to make scrollable with a visible scrollbar

.hidden-scrollbar {
    width: 25%;
    float: right;
    height: 160px;
    overflow-y:scroll;
   
}

After that, use the following CSS code to hide only the visible scrollbar.

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

 .hidden-scrollbar{ 
 	-ms-overflow-style: none; 
 	overflow: -moz-scrollbars-none; 
 	scrollbar-width: none; 
 }

 

 

Categories CSS

Leave a Comment