Hide scroll bar, but still being able to scroll

  • Added:
  • |
  • In: Wordpress

I want to be able to scroll through the whole page, but without the scrollbar being showed.

In Google Chrome it's

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

But Mozilla Firefox and Internet Explorer don't seem to work like that.

I also tried css:

overflow: hidden; 

That does hide the scrollbar, but I cant scroll anymore.

Is there anyway I can remove the scrollbar and still being able to scroll the whole page? With just css or html please.

This Question Has 18 Answeres | Orginal Question | Oussama Dooby

Adding padding to an inner div, as in the currently accepted answer, won't work if for some reason you want to use box-model: border-box.

What does work in both cases is increasing the width of the inner div to 100% plus the scrollbar's width (assuming overflow: hidden on the outer div).

For example, in CSS:

.container2 { width: calc(100% + 19px); } 

In Javascript, cross-browser:

var child = document.getElementById('container2'); var addWidth = child.offsetWidth - child.clientWidth + "px"; child.style.width = 'calc(100% + ' + addWidth + ')'; 

I had this problem. Super simple to fix. get two containers. The inner will be your scrollable container and the outer will obviously house the inner:

#inner_container { width: 102%; overflow: auto; } #outer_container { overflow: hidden } 

Super simple and should work with any browser. Good Luck!

Just a test which is working fine.

#parent{ height: 100%; width: 100%; overflow: hidden; } #child{ width: 100%; height: 100%; overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ } 

Working Fiddle


Since, the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle


Using Position: absolute,

#parent{ height: 100%; width: 100%; overflow: hidden; position: relative; } #child{ position: absolute; top: 0; bottom: 0; left: 0; right: -17px; /* Increase/Decrease this value for cross-browser compatibility */ overflow-y: scroll; } 

Working Fiddle

JavaScript Working Fiddle


Based on this answer, I created a simple scroll plugin. I hope this will help someone.

Just use following 3 lines and your problem will be solved :

 #liaddshapes::-webkit-scrollbar { width: 0 !important; } 

Where liaddshape is the name of div where scrool is comming.

function reloadScrollBars() { document.documentElement.style.overflow = 'auto'; // firefox, chrome document.body.scroll = "yes"; // ie only } function unloadScrollBars() { document.documentElement.style.overflow = 'hidden'; // firefox, chrome document.body.scroll = "no"; // ie only } 

Call these functions, for any point you want to load or unload or reload the scrollbars. Still scrollable in Chrome as I tested it in Chrome. Not sure of the other browsers.

This works for me:

.container { -ms-overflow-style: none; // IE 10+ overflow: -moz-scrollbars-none; // Firefox } .container::-webkit-scrollbar { display: none; // Safari and Chrome } 

Note: In the latest versions of Firefox the -moz-scrollbars-none property is deprecated ( link ).

this will be at the body:

<div id="maincontainer" > <div id="child">this is the 1st step</div> <div id="child">this is the 2nd step</div> <div id="child">this is the 3rd step</div> 

and that is the css:

#maincontainer { background:grey ; width:101%; height:101%; overflow:auto; position:fixed; } #child { background: white; height:500px; } 

This Answer doesn't include the code, so here is the solution from page:

According to the page this approach doesn't need to know the width of the scrollbar ahead of time in order to work and the solution works for all browsers too, and can be seen here.

The good thing is that you are not forced to use padding or width differences to hide the scrollbar.

This is also zoom safe. Padding/width solutions show the scrollbar when zoomed to minimum.

FF fix: http://jsbin.com/mugiqoveko/1/edit?output

.element, .outer-container { width: 200px; height: 200px; } .outer-container { border: 5px solid purple; position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0; overflow-x: hidden; overflow-y: scroll; padding-right: 150px; } .inner-container::-webkit-scrollbar { display: none; }
<div class="outer-container"> <div class="inner-container"> <div class="element"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula quam nibh, eu tristique tellus dignissim quis. Integer condimentum ultrices elit ut mattis. Praesent rhoncus tortor metus, nec pellentesque enim mattis nec. Nulla vitae turpis ut dui consectetur pellentesque quis vel est. Curabitur rutrum, mauris ut mollis lobortis, sem est congue lectus, ut sodales nunc leo a libero. Cras quis sapien in mi fringilla tempus condimentum quis velit. Aliquam id aliquam arcu. Morbi tristique aliquam rutrum. Duis tincidunt, orci suscipit cursus molestie, purus nisi pharetra dui, tempor dignissim felis turpis in mi. Vivamus ullamcorper arcu sit amet mauris egestas egestas. Vestibulum turpis neque, condimentum a tincidunt quis, molestie vel justo. Sed molestie nunc dapibus arcu feugiat, ut sollicitudin metus sagittis. Aliquam a volutpat sem. Quisque id magna ultrices, lobortis dui eget, pretium libero. Curabitur aliquam in ante eu ultricies. </div> </div> </div>

perfect-scrollbar plugin seems to be the way to go, see: https://github.com/noraesae/perfect-scrollbar

It is well documented and complete JS based solution for the scrollbars issue.

Demo page: http://noraesae.github.io/perfect-scrollbar/

#subparant{ overflow:hidden; width: 500px; border: 1px rgba(0,0,0,1.00) solid; } #parent{ width: 515px; height: 300px; overflow-y: auto; overflow-x: hidden; opacity:10%; } #child{ width:511px; background-color:rgba(123,8,10,0.42); } <body> <div id="subparant"> <div id="parent"> <div id="child"> <!- code here for scroll -> </div> </div> </div> </body> 
<div style='overflow:hidden; width:500px;'> <div style='overflow:scroll; width:508px'> My scroll-able area </div> </div> 

this is a trick to somewhat overlap scrollbar with an overlapping div which doesnt have any scroll bars

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

this is only for webkit browsers.. or you could use browser specific css (if there is any in future) every browser could have a different and specific property for their respective bars


For Microsoft Edge use: -ms-overflow-style: -ms-autohiding-scrollbar; or -ms-overflow-style: none; as per MSDN.

There is no equivalent for FF Although there is JQuery plugin to achieve this http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

Easy in Webkit, with optional styling:

html { overflow: scroll; overflow-x: hidden; } ::-webkit-scrollbar { width: 0px; /* remove scrollbar space */ background: transparent; /* optional: just make scrollbar invisible */ } /* optional: show position indicator in red */ ::-webkit-scrollbar-thumb { background: #FF0000; } 

This is a divitis-esque solution which nontheless should work for all browsers...

The markup is as follows, and needs to be inside something with relative positioning (and its width should be set, for example 400px):

<div class="hide-scrollbar"> <div class="scrollbar"> <div class="scrollbar-inner"> </div> </div> </div> 

The CSS:

.hide-scrollbar { overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .scrollbar { overflow-y: scroll; position: absolute; top: 0; left: 0; right: -50px; bottom: 0; } .scrollbar-inner { width: 400px; } 

Another simple working fiddle.

#maincontainer { background: orange; width:200px; height:200px; overflow:hidden; } #childcontainer { background: yellow; position: relative; width:200px; height:200px; top:20px; left:20px; overflow:auto; } 

Overflow hidden on the parent container, and overflow auto on the child container. Simple.

Just set the width of the child's width to 100% , padding to 15px, overflow-x to scroll and overflow:hidden for the parent and whatever width you want, it works perfectly on all major browsers including IE Edge with an exception of IE8 and lower.

This is how I do it for horizontal scroll, only CSS and works well with frameworks like bootstrap / col-*. It only needs 2 extra div and the parent with a width or max-width set:

You can select the text to make it scroll or scroll it with fingers if you have a touchscreen.

.overflow-x-scroll-no-scrollbar {overflow:hidden;} .overflow-x-scroll-no-scrollbar div { overflow-x:hidden; margin-bottom:-17px; overflow-y:hidden; width:100%; } .overflow-x-scroll-no-scrollbar div * { overflow-x:auto; width:100%; padding-bottom:17px; white-space: nowrap; cursor:pointer } /* the following classes are only here to make the example looks nicer */ .row {width:100%} .col-xs-4 {width:33%;float:left} .col-xs-3 {width:25%;float:left} .bg-gray{background-color:#DDDDDD} .bg-orange{background-color:#FF9966} .bg-blue{background-color:#6699FF} .bg-orange-light{background-color:#FFAA88} .bg-blue-light{background-color:#88AAFF}
<html><body> <div class="row"> <div class="col-xs-4 bg-orange">Column 1</div> <div class="col-xs-3 bg-gray">Column 2</div> <div class="col-xs-4 bg-blue">Column 3</div> </div> <div class="row"> <div class="col-xs-4 bg-orange-light">Content 1</div> <div class="col-xs-3 overflow-x-scroll-no-scrollbar"> <div> <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div> </div> </div> <div class="col-xs-4 bg-blue-light">Content 3</div> </div> </body></html>

Short version for lazy people:

.overflow-x-scroll-no-scrollbar {overflow:hidden;} .overflow-x-scroll-no-scrollbar div { overflow-x:hidden; margin-bottom:-17px; overflow-y:hidden; width:100%; } .overflow-x-scroll-no-scrollbar div * { overflow-x:auto; width:100%; padding-bottom:17px; white-space: nowrap; cursor:pointer } /* the following classes are only here to make the example looks nicer */ .parent-style {width:100px;background-color:#FF9966}
<div class="parent-style overflow-x-scroll-no-scrollbar"> <div> <div>This content too long for the container, so it needs to be hidden but scrollable without scrollbars</div> </div> </div>


<div class="parent"> <div class="child"> </div> </div> 


.parent{ position: relative; width: 300px; height: 150px; border: 1px solid black; overflow: hidden; } .child { height: 150px; width: 318px; overflow-y: scroll; } 

Apply CSS accordingly.

Check it here (tested in IE and FF).

Not sure if I'm too late to the party but adding

 overflow: -moz-scrollbars-none; 

worked for me

I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns