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

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 this in CSS:

overflow: hidden;

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

Is there any way I can remove the scrollbar and still being able to scroll the whole page? With just CSS or HTML, please.

20 Answers 11

<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

--EDIT--

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

upvote
  flag
ictacademie.info/oussamaelbachiri this site @Oussama Dobby uses media='screen' and then '::-webkit-scrollbar' property for css – Arpit Singh
upvote
  flag
And what are thow specific css properties? – Oussama Dooby
upvote
  flag
either a hacky layout or jquery is an alternative – Arpit Singh
upvote
  flag
Your first solution gives me this problem s24.postimg.org/idul8zx9w/Naamloos.jpg And what do you mean by hacky layout @ArpitSingh – Oussama Dooby
2 upvote
  flag
The following allowed me to enable native scrolling in Cordova with jQuery Mobile 1.4 on iOS7 & iOS8 // CSS ::-webkit-scrollbar { display: none; } .ui-content { -webkit-overflow-scrolling: touch; } // jQuery Mobile onMobileInit() $.mobile.touchOverflowEnabled = true; – Ryan Williams
up vote 417 down vote accepted

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

JavaScript:

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

or

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

Info:

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

6 upvote
  flag
In your last "working fiddle" I've seen too many !important so I've remove them all : jsfiddle.net/5GCsJ/954 – Roko C. Buljan
2 upvote
  flag
This solution does not work when the content's width is set to auto. when scrolling all the way to the right, part of the content is still not visible. Why is that? Any solutions? Checkout the problem here : jsfiddle.net/50fam5g9/7 Note : the width of the content cannot be known beforehand in my case that's why it has to be set to auto. – Sprout Coder
9 upvote
  flag
This approach won't cover all browsers, and will be very specific to the browser's version you are working with during the development. – Itsik Avidan
upvote
  flag
how does it work, or specifically, why does it even scroll for first example. Overflow is hidden right! so anything that expands beyond parent should be hidden. Overflow is auto for child, so if content of child is more than child height scrollbar would appear. But content isn't more than the height of the child so scroll bars don't appear. That's fine however why does it scroll???? – Muhammad Umer
upvote
  flag
Tried it using Firefox, didn't work, and I didn't bother to try other browsers. It only showed a pink thin border box. – Bryan
upvote
  flag
What about the horizontal scroll bars? How can you hide those? – www139
1 upvote
  flag
@www139 the same concept should work. use margin-bottom or bottom. – Mr_Green
upvote
  flag
I have a problem with the different browsers and their versions. On Firefox I need to set the padding-right 17px, but on Chrome it is 15px :/ – Hristo Eftimov
upvote
  flag
@XristoEftimov for that you can manage it with JavaScript. element.offsetWidth - element.clientWidth. – Mr_Green
upvote
  flag
I combined this answer with this answer for calculating the width of the scrollbar in browsers, and then just added modified the right css via jQuery to be the calculated width of the scrollbar. Seems to work nicely :) – dingo_d
3 upvote
  flag
one more thing, you should add box-sizing: content-box; in child's css style.. – ryu
upvote
  flag
Safari scroll is always floating, so it doesn't work. – Serginho
1 upvote
  flag
The problem with padding-right method is that child elements with width:100% will be 100%-17px wide, leaving some space on the right. – limilaw
1 upvote
  flag
Why complicate and calculate scrollbar width? Just set box-sizing: border-box; width: calc(100% + 50px); and the same value for padding. No browser has 50px scrollbar width/height, so it should simply cover them all... – Robert Koritnik
upvote
  flag
Improved Fiddles: jsfiddle.net/5GCsJ/7505 and jsfiddle.net/5GCsJ/7507 These add rtl support and a third container for applying padding to the contained content using display: table-cell. The second Fiddle still shows the scrollbars on Android, which is probably the more correct solution given how scrollbars are usually overlaid on top of the content. ::-webkit-scrollbar { display: none; } probably works fine to solve that issue. Most people are simply interested in making very ugly scrollbars vanish. – CubicleSoft
upvote
  flag
@RobertKoritnik - I tried manipulating the Fiddles to utilize your box-sizing/calc() suggestion but I can't seem to get it to work. While the scrollbars don't appear, the content also gets chopped off no matter what I've tried (padding, margins, right). Can you post some updated Fiddles? I was testing with calc(100% + 200px) instead of 50px. It would be nice to ditch Javascript if it doesn't involve any hacks. – CubicleSoft
upvote
  flag
I ended up using most of the 7507 Fiddle approach in the jQuery Table Body Scroll plugin here: github.com/cubiclesoft/jquery-tablebodyscroll Demo (under 'Add Entry'): barebonescms.com/demos/admin_pack/admin.php – CubicleSoft
upvote
  flag
This is fine and dandy but seems like a hacky approach where you should be able to target the scroll bar via css... – Radmation

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

    overflow: -moz-scrollbars-none;

worked for me

2 upvote
  flag
Hahaha it is too late for me, but I bet someone will find this helpfull, thank you!! – Oussama Dooby
28 upvote
  flag
It just makes the scrollbar disappear on FF, but you aren't able to scroll anymore. – Michael De Keyser
upvote
  flag
Someone just did. Thanks! – Joe Yahchouchi
18 upvote
  flag
Why the upvotes if this disables scrolling in FF? – Isaac Gregson
upvote
  flag
applied this to element in cordova app, no scrollbar, no scrolling. – Kishor Pawar

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.

upvote
  flag
This doesn't hide the scrollbar, it just pushes it out of view with the "left" value. – robertmiles3
upvote
  flag
@robertmiles3 isn't that the same thing? hiding and not being able to view? – Bryan Willis
1 upvote
  flag
@robertmiles3 the selected answer above does the same thing from the right. Seems like all solutions are hacky until FIrefox decides to allow for CSS to hide scrollbars again. blogs.msdn.com/b/kurlak/archive/2013/11/03/… – geoyws
upvote
  flag
I have to agree. This is a similar solution proposed by the accepted answer. If it works it works. upvoted – JSON

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;
}

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!

13 upvote
  flag
basically you are saying that width of the scroll bar on every screen with any resolution will be 2% – euvl
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.

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.

upvote
  flag
Show me you problem in fiddle – Innodel
upvote
  flag
Easy and useful, thanks! I used {display:none} instead of {width:0;} and also work – Santi Nunez

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>

upvote
  flag
This wont work for all browsers... Only webkit browsers. You're using a webkit-specific selector ::-webkit-scrollbar {} – Prefix
upvote
  flag
I tested it in all new browsers before I answered to the question. Also FF. It has happenned some changes in FF? – Timo Kähkönen
upvote
  flag
I updated the answer. It seems that adding padding-right: 150px; fixes it. Tested in FF, Chrome, Safari and Edge. Works also in low zoom levels due to big right-padding. – Timo Kähkönen
2 upvote
  flag
Edge, IE 11, IE10 (maybe lower also) support html { -ms-overflow-style: none;}. In these browsers there is no need to use padding-hack. – Timo Kähkönen
upvote
  flag
Had to use @Timo's answer and overflow-y: scroll to get scroll behavior but hidden (just like Chrome) to make it work on Edge23. – jojo
upvote
  flag
Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch – aleclarson

HTML:

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

CSS:

.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).

#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>
upvote
  flag
Not sure why this was downvoted, but I just upvoted it as it does go in the right direction, the other solutions didn't really work well in my case. overflow-x: hidden; + overflow-y: scroll; is what did the trick, along with the >100% width (110% in my case worked nicely). – dAngelov

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;
}
upvote
  flag
tried this in cordova app, worked fine. had to apply overflow:scroll to element. – Kishor Pawar
upvote
  flag
This worked well for all my bowsers. Thanks – MrOnyancha
upvote
  flag
Tried in Google chrome and safari. Works! +1 – GauravPandey
12 upvote
  flag
Does not works on Firefox, Quite obvious as this purely states webkit. Thanks :) – Zohair
1 upvote
  flag
works excellent in Electron apps as expected since they're chromium. +1 thanks :D – misaka
upvote
  flag
Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch – aleclarson

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.

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 + ')';

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 ).

upvote
  flag
firefox hide doesn't work for me – mheavers
4 upvote
  flag
For me, overflow: -moz-scrollbars-none hides the scrollbars in Firebox but also disables scrolling. Can you provide a demo where this is working for you? – chipit24
upvote
  flag
Unfortunately the -moz-scrollbars-none property is deleted for the newest Firefox versions: developer.mozilla.org/en-US/docs/Web/CSS/overflow – Hristo Eftimov
upvote
  flag
Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch – aleclarson
upvote
  flag
@aleclarson I didn't know that. I will test that, will check for a solution and will update my post. thanks :) – Hristo Eftimov
2 upvote
  flag
For obsolete Firefox -moz-scrollbars-none you can use @-moz-document url-prefix() { .container { overflow: hidden; } }. See //allinonescript.com/questions/952861/…. – Martin Ždila

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;
}

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>

upvote
  flag
Thanks, I tried, it works great. One thing is it's better to change margin-bottom to be padding-bottom but with the same value. This will not eat up below space for element at the bottom. It prevents overlapping. – haxpor
upvote
  flag
@haxpor The margin-bottom is negative, I think it cannot be changed to a padding-bottom, that cannot handle negative values – Jean

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/

upvote
  flag
I can't see how this relates to the question? – Chris Nevill

On modern browsers you can use wheel event https://developer.mozilla.org/en-US/docs/Web/Events/wheel

// content is the element you want to apply the wheel scroll effect
content.addEventListener('wheel', function(e) {
  const step = 100; // how many pixels to scroll
  if(e.deltaY > 0 ) // scroll down
     content.scrollTop += step;
  else //scroll up
     content.scrollTop -= step;
});

I happen to try the above solutions in my project and for some reason I was not able to hide the scroll bar due to div positioning. Hence, I decided to hide the scroll bar by introducing a div that covers it superficially. Example below is for a horizontal scroll bar:

<div id="container">
  <div id="content">
     My content that could overflow horizontally
  </div>
  <div id="scroll-cover">
     &nbsp; 
  </div>
</div>

Corresponding CSS is as follows:

#container{
   width: 100%;
   height: 100%;
   overflow: hidden;
   position: relative;
}

#content{
  width: 100%;
  height: 100%;
  overflow-x: scroll;
}
#scroll-cover{
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: 0;
  background-color: #fff; /*change this to match color of page*/
}

Not the answer you're looking for? Browse other questions tagged or ask your own question.