Hide scroll bar, but while still being able to scroll

Question

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 can't scroll any more.

Is there a way I can remove the scrollbar while still being able to scroll the whole page?

With just CSS or HTML, please.

Solution 1

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

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{
    width: 100%;
    height: 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

Information:

Based on this answer, I created a simple scroll plugin.

Solution 2

This works for me with simple CSS properties:

.container {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.container::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

For older versions of Firefox, use: overflow: -moz-scrollbars-none;

Solution 3

It is easy in WebKit, with optional styling:

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

Solution 4

UPDATE:

Firefox now supports hiding scrollbars with CSS, so all major browsers are now covered (Chrome, Firefox, Internet Explorer, Safari, etc.).

Simply apply the following CSS to the element you want to remove scrollbars from:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

This is the least hacky cross browser solution that I'm currently aware of. Check out the demo.

---

ORIGINAL ANSWER:

Here's another way that hasn't been mentioned yet. It's really simple and only involves two divs and CSS. No JavaScript or proprietary CSS is needed, and it works in all browsers. It doesn't require explicitly setting the width of the container either, thus making it fluid.

This method uses a negative margin to move the scrollbar out of the parent and then the same amount of padding to push the content back to its original position. The technique works for vertical, horizontal and two way scrolling.

Demos:

• Vertical
• Horizontal
• Both directions

Example code for the vertical version:

HTML:

<div class="parent">
  <div class="child">
    Your content.
  </div>
</div>

CSS:

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #AAA;
  overflow: hidden;
}

.child {
  height: 100%;
  margin-right: -50px; /* Maximum width of scrollbar */
  padding-right: 50px; /* Maximum width of scrollbar */
  overflow-y: scroll;
}

Solution 5

Use:

<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 the scrollbar with an overlapping div which doesn't have any scroll bars:

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

This is only for WebKit browsers... Or you could use browser-specific CSS content (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 Firefox. Although there is a jQuery plugin to achieve this, http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html

View more solutions

Comments

[Franz]

does webkit-scrollbar doesn't work on other browser?

[Priya]

Adding ::-webkit-scrollbar is changing the background color of section where the data ends. Even after adding background-color property to white, it doesnot change anything

[Arpit Singh]

ictacademie.info/oussamaelbachiri this site @Oussama Dobby uses media='screen' and then '::-webkit-scrollbar' property for css

[Oussama el Bachiri]

And what are thow specific css properties?

[Arpit Singh]

either a hacky layout or jquery is an alternative

[Oussama el Bachiri]

Your first solution gives me this problem s24.postimg.org/idul8zx9w/Naamloos.jpg And what do you mean by hacky layout @ArpitSingh

[Roko C. Buljan]

In your last "working fiddle" I've seen too many !important so I've remove them all : jsfiddle.net/5GCsJ/954

[robertmiles3]

This doesn't hide the scrollbar, it just pushes it out of view with the "left" value.

[Itsik Avidan]

This approach won't cover all browsers, and will be very specific to the browser's version you are working with during the development.

[Ryan Williams]

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;

[euvl]

basically you are saying that width of the scroll bar on every screen with any resolution will be 2%

[Innodel]

Show me you problem in fiddle

[dAngelov]

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

[Bryan Willis]

@robertmiles3 isn't that the same thing? hiding and not being able to view?

[geoyws]

@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/…

[Kishor Pawar]

tried this in cordova app, worked fine. had to apply overflow:scroll to element.

[tdc]

This wont work for all browsers... Only webkit browsers. You're using a webkit-specific selector ::-webkit-scrollbar {}

[Timo Kähkönen]

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]

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.

[chipit24]

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?

[Timo Kähkönen]

Edge, IE 11, IE10 (maybe lower also) support html { -ms-overflow-style: none;}. In these browsers there is no need to use padding-hack.

[jojo]

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.

[santillanix]

Easy and useful, thanks! I used {display:none} instead of {width:0;} and also work

[Hristo Eftimov]

Unfortunately the -moz-scrollbars-none property is deleted for the newest Firefox versions: developer.mozilla.org/en-US/docs/Web/CSS/overflow

[Zohair]

Does not works on Firefox, Quite obvious as this purely states webkit. Thanks :)

[haxpor]

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.

[Jean]

@haxpor The margin-bottom is negative, I think it cannot be changed to a padding-bottom, that cannot handle negative values

[rococo]

works excellent in Electron apps as expected since they're chromium. +1 thanks :D

[aleclarson]

Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch

[aleclarson]

Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch

[aleclarson]

Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch

[Hristo Eftimov]

@aleclarson I didn't know that. I will test that, will check for a solution and will update my post. thanks :)

[Robert Koritnik]

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

[Martin Ždila]

For obsolete Firefox -moz-scrollbars-none you can use @-moz-document url-prefix() { .container { overflow: hidden; } }. See stackoverflow.com/questions/952861/….

[JSON]

I have to agree. This is a similar solution proposed by the accepted answer. If it works it works. upvoted

[mwm]

it's the same thing as the most upvoted sollution: trying to hide the scrollbar. this is not ideal because it varies with the browser

[Lawrence Cherone]

In electron, was having issue with the scrollbar always showing, then 2 scrollbars when scroll was needed, the above just removes all scroll bars.. fixed by applying to only html e.g: html::-webkit-scrollbar

[romal tandel]

it works with chrome. but does not work with mozilla firefox.

[user1566694]

This makes it much easier than I thought. But how do you make IE understand that these are 2 different things: overflow-y:scroll; overflow-x:visible; D:

[Richrd]

This is a great answer! The only caveat is that the width of the element must be known and set in pixels (percentages won't work)

[Austin Perez]

ALSO, If you would like to alternatively hide x-scrollbar, you can add: height: 0px; to ::-webkit-scrollbar

[Oussama el Bachiri]

This is very nice to know! It seems the browsers are indeed making progress, haha!

[imans77]

This is the answer I was looking for. Thanks. I used overflow: hidden and this code, for the mat-card-content (in angular 5, of course) to be scrollable and these solved my problem. Note: I used e.deltaY as my step and it worked like normal scrolling, so I think for normally scrolling but with scrollbar hidden, this is the best match.

[Hristo Eftimov]

I have updated my answer with the latest support for Firefox :)

[cimak]

note that scrollbar-width (FF only) is flagged as "experimental"

[Meloman]

Yes @cimak, but on FF you can hide it w/o any problem, so it's realy only used for Chrome.

[jnnnnn]

the page linked here warns that this approach is not appropriate?

[Peter Mortensen]

What do nested blocks ({}) mean? How is it to be interpreted? And the &? Perhaps elaborate in your answer?

[vipatron]

It's a SASS thing (apparently, LESS too): css-tricks.com/the-sass-ampersand

[Murhaf Sousli]

@PeterMortensen I just saw your comment now, &::-webkit-scrollbar becomes .hide-native-scrollbar::-webkit-scrollbar { } in CSS

[adriendenat]

just do { width: 0; height: 0;} for ::-webkit-scrollbar instead of display: none for iOS.

[gene b.]

In FF71 this blocks all scrolling.

[Adrien]

The support is practically non existent except for FF as you mentioned with is too little for what the OP asked for. Check caniuse.com/#feat=mdn-css_properties_scrollbar-width

[Alvin Moyo]

@Adrien Well, the Original question stated that they have a solution for other browsers. (But Mozilla Firefox and Internet Explorer don't seem to work like that) he says, that is the reason I gave the Firefox Solution.

[Sean Halls]

I found this worked well when combined with the equivalent: div::-webkit-scrollbar { display: none; } for Webkit / Chrome.

[Perrier]

Missing an & from the scss version: &::-webkit-scrollbar { display: none; }

[BarryCap]

scrollbar-width: none doesn't work for me in Firefox, neither scrollbar-width: 0. I don't think that you can change the width of the scrollbar in Firefox.

[Iter Ator]

scrollbar-width: none does not work in Firefox 91

[Oussama el Bachiri]

Hi! How cool people are still answering this question I asked as a young starting dev.

[Eazicoding]

Always good to find an improved solution. :)

[Andy]

curiously, hiding a horizontal scrollbar in Chrome causes it to add some kind of padding to the bottom that can mess up flexbox align-items (only shows up in green when hovering inspect element)

[Webalation]

This is the best answer IMO. Here's the source where I found out how to hide the scroll bar while maintaining the functionality for each of the browsers mentioned. w3schools.com/howto/howto_css_hide_scrollbars.asp

[Oussama el Bachiri]

Very true, it's just a neat little memory from 9 years ago when I was just starting out as a young passionate developer. And when people still answer the question, I feel like that passion is still alive.

[S.Serpooshan]

@IterAtor But it works in my version (Firefox 97)

[Priya]

But adding ::-webkit-scrollbar is changing the background color of section where the data ends. Even after adding background-color property to white, it doesnot change anything

[Priya]

This pseudo element ::-webkit-scrollbar works fine in VS but does not show when deployed/published on server. I am not understanding what to do. Did anyone face the similar porblem?