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.

• 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
• Aakash Parangi: /* Hide scrollbar for Chrome, Safari, and Opera / .your-container::-webkit-scrollbar { display: none; } / Hide scrollbar for IE, Edge, and Firefox / .your-container { -ms-overflow-style: none; / IE and Edge / scrollbar-width: none; / Firefox */ }

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

• Roko C. Buljan: In your last "working fiddle" I've seen too many !important so I've remove them all : jsfiddle.net/5GCsJ/954
• 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.
• 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...
• Brian Davis: @RobertKoritnik I have no problems with your idea, but the way it's written just makes me want to scream "Challenge Accepted!" at the top of my lungs and make a browser with the fluffiest scrollbars
• bumfo: This isn't working on macOS Chrome/Safari when "Show scroll bars" is not set to "always". Additionally, hard coding 17px is problematic.

Answer 2

You can use simple CSS properties:

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

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

• 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?
• Hristo Eftimov: Unfortunately the -moz-scrollbars-none property is deleted for the newest Firefox versions: developer.mozilla.org/en-US/docs/Web/CSS/overflow
• aleclarson: Since iOS8, this doesn't work when used with -webkit-overflow-scrolling: touch
• Martin Ždila: For obsolete Firefox -moz-scrollbars-none you can use @-moz-document url-prefix() { .container { overflow: hidden; } }. See stackoverflow.com/questions/952861/….
• Hristo Eftimov: I have updated my answer with the latest support for Firefox :)

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

• Kishor Pawar: tried this in cordova app, worked fine. had to apply overflow:scroll to element.
• Zohair: Does not works on Firefox, Quite obvious as this purely states webkit. Thanks :)
• 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
• romal tandel: it works with chrome. but does not work with mozilla firefox.

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

• Iter Ator: scrollbar-width: none does not work in Firefox 91
• S.Serpooshan: @IterAtor But it works in my version (Firefox 97)
• user17648256: I love this answer! My only problem is that it leaves a miniature 1px wide scrollbar.
• webtweakers: This is how Google does it. Well, more or less.
• Adam Reis: Why using width/height set to 0, instead of just display: none for the webkit solution?

Answer 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

• Arpit Singh: ictacademie.info/oussamaelbachiri this site @Oussama Dobby uses media='screen' and then '::-webkit-scrollbar' property for css
• user_2215528: And what are thow specific css properties?
• Arpit Singh: either a hacky layout or jquery is an alternative
• user_2215528: Your first solution gives me this problem s24.postimg.org/idul8zx9w/Naamloos.jpg And what do you mean by hacky layout @ArpitSingh
• 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;

Answer 6

In addition, scrolling without a scroll bar for all browsers.

CSS

.keep-scrolling {
 background-color: #EEE;
 width: 200px;
 height: 100px;
 border: 1px dotted black;
 overflow-y: scroll; /* Add the ability to scroll the y axis */
}
/* Hide the scrollbar for Chrome, Safari and Opera */
.keep-scrolling::-webkit-scrollbar {
 display: none;
}
/* Hide the scrollbar for Internet Explorer, Edge and Firefox */
.keep-scrolling {
 -ms-overflow-style: none; /* Internet Explorer and Edge */
 scrollbar-width: none; /* Firefox */
}

SCSS

.keep-scrolling {
 background-color: #EEE;
 width: 200px;
 height: 100px;
 border: 1px dotted black;
 overflow-y: scroll; /* Add the ability to scroll the y axis */
 /* Hide the scrollbar for Internet Explorer, Edge and Firefox */
 -ms-overflow-style: none; /* Internet Explorer and Edge */
 scrollbar-width: none; /* Firefox */
 /* Hide the scrollbar for Chrome, Safari and Opera */
 &::-webkit-scrollbar {
 display: none;
 }
}

HTML

<div class="keep-scrolling">
</div>

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

Answer 7

Use this to hide the scrollbar but keep functionality:

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

Hide scrollbar for IE, Edge and Firefox

.example {
 -ms-overflow-style: none; /* IE and Edge */
 scrollbar-width: none; /* Firefox */
}

• 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

Answer 8

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.

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

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

Answer 9

This works for me cross-browser. However, this doesn't hide native scrollbars on mobile browsers.

In SCSS

.hide-native-scrollbar {
 scrollbar-width: none; /* Firefox 64 */
 -ms-overflow-style: none; /* Internet Explorer 11 */
 &::-webkit-scrollbar { /** WebKit */
 display: none;
 }
}

In CSS

.hide-native-scrollbar {
 scrollbar-width: none; /* Firefox 64 */
 -ms-overflow-style: none; /* Internet Explorer 11 */
}
.hide-native-scrollbar::-webkit-scrollbar { /** WebKit */
 display: none;
}

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

Answer 10

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

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

Where liaddshapes is the name of the div where scroll is coming.

• Innodel: Show me you problem in fiddle
• santillanix: Easy and useful, thanks! I used {display:none} instead of {width:0;} and also work

Answer 11

Just write this code:

::-webkit-scrollbar {
 width: 0px;
}

Or

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

• Md Azharuddin: How come this answer has so many upvotes? Question clearly says webkit-scrollbar does not work in firefox.

Answer 12

scrollbar-width: none; 

works for me.

• Samih A: no mush support for this cross-browser at the time I'm posting caniuse.com/?search=scrollbar-width
• Gustavo Contreiras: Just tested scrollbar-width: none; in Edge, Firefox and Chrome and it's working as expected for me.

Answer 13

This worked for me

div {
 -ms-overflow-style: none; /* Edge, Internet Explorer */
 scrollbar-width: none; /* Firefox */
 overflow-y: scroll;
}
// hides scrollbars while allowing to scroll
div::-webkit-scrollbar {
 display: none; /* Chrome, Safari, Opera */
}

Answer 14

The following SCSS styling should make your scrollbar transparent on most browsers (scrollbar-color caniuse, Safari is Webkit so check it yourself, IE probably actual in 2024):

.hide-scrollbar {
 scrollbar-width: thin;
 scrollbar-color: transparent transparent;
 &::-webkit-scrollbar {
 width: 1px;
 }
 &::-webkit-scrollbar-track {
 background: transparent;
 }
 &::-webkit-scrollbar-thumb {
 background-color: transparent;
 }
}

Answer 15

As of December 11th 2018 (Firefox 64 and above), the answer to this question is very simple indeed as Firefox 64+ now implements the CSS Scrollbar Styling spec.

Just use the following CSS:

scrollbar-width: none;

Firefox 64 release note link here.

• user_2215528: This is very nice to know! It seems the browsers are indeed making progress, haha!
• horoyoi o: simple and working. good!

Answer 16

The following was working for me on Microsoft, Chrome and Mozilla for a specific div element:

div.rightsidebar {
 overflow-y: auto;
 scrollbar-width: none;
 -ms-overflow-style: none;
}
div.rightsidebar::-webkit-scrollbar { 
 width: 0 !important;
}

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

Answer 17

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

Everything you've written is correct except "overflow". webkit for Chrome and other browsers

overflow-y: scroll;

or

overflow-y: auto;

For Firefox and Edge

scrollbar-width: none;

or

scrollbar-width: thin;

Answer 18

To hide scroll bars for elements with overflowing content use.

.div{
 scrollbar-width: none; /* The most elegant way for Firefox */
}

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

Answer 19

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 Internet Explorer and Firefox).

Answer 20

On modern browsers you can use wheel event:

// Content is the element you want to apply the wheel scroll effect to
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;
});

• 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.
• jnnnnn: the page linked here warns that this approach is not appropriate?

Answer 21

Use

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

Call these functions for any point you want to load or unload or reload the scrollbars. It is still scrollable in Chrome as I tested it in Chrome, but I am not sure of the other browsers.

Answer 22

Use:

CSS

#subparent {
 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);
}

HTML

<body>
 <div id="subparent">
 <div id="parent">
 <div id="child">
 <!- Code here for scroll ->
 </div>
 </div>
 </div>
</body>

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

Answer 23

This works for me:

scroll-content {
 overflow-x: hidden;
 overflow-y: scroll;
}
scroll-content::-webkit-scrollbar {
 width: 0;
}

Answer 24

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>
</div>

And this is the CSS:

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

Answer 25

This is how I do it for horizontal scroll; only CSS and works well with frameworks like Bootstrap / col-*. It only needs two extra divs 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>

• 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

Answer 26

My problem: I don't want any style in my HTML content. I want my body directly scrollable without any scrollbar, and only a vertical scroll, working with CSS grids for any screen size.

The box-sizing value impact padding or margin solutions, they works with box-sizing:content-box.

I still need the "-moz-scrollbars-none" directive, and like gdoron and Mr_Green, I had to hide the scrollbar. I tried -moz-transform and -moz-padding-start, to impact only Firefox, but there was responsive side effects that needed too much work.

This solution works for HTML body content with "display: grid" style, and it is responsive.

/* Hide HTML and body scroll bar in CSS grid context */
html, body {
 position: static; /* Or relative or fixed ... */
 box-sizing: content-box; /* Important for hidding scrollbar */
 display: grid; /* For CSS grid */
 /* Full screen */
 width: 100vw;
 min-width: 100vw;
 max-width: 100vw;
 height: 100vh;
 min-height: 100vh;
 max-height: 100vh;
 margin: 0;
 padding: 0;
}
html {
 -ms-overflow-style: none; /* Internet Explorer 10+ */
 overflow: -moz-scrollbars-none; /* Should hide the scroll bar */
}
/* No scroll bar for Safari and Chrome */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
 display: none; /* Might be enough */
 background: transparent;
 visibility: hidden;
 width: 0px;
}
/* Firefox only workaround */
@-moz-document url-prefix() {
 /* Make HTML with overflow hidden */
 html {
 overflow: hidden;
 }
 /* Make body max height auto */
 /* Set right scroll bar out the screen */
 body {
 /* Enable scrolling content */
 max-height: auto;
 /* 100vw +15px: trick to set the scroll bar out the screen */
 width: calc(100vw + 15px);
 min-width: calc(100vw + 15px);
 max-width: calc(100vw + 15px);
 /* Set back the content inside the screen */
 padding-right: 15px;
 }
}
body {
 /* Allow vertical scroll */
 overflow-y: scroll;
}

Answer 27

.your-overflow-scroll-class::-webkit-scrollbar {
 ...
 width: 0.5rem; //only hide the vertical scrollbar
 height: 0px; //only hide the horizontal scrollbar
}

Answer 28

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

Answer 29

I just wanted to share a combined snippet for hiding the scrollbar that I use when developing. It is a collection of several snippets found on the Internet that works for me:

.container {
 overflow-x: scroll; /* For horiz. scroll, otherwise overflow-y: scroll; */
 -ms-overflow-style: none;
 overflow: -moz-scrollbars-none;
 scrollbar-width: none;
}
.container::-webkit-scrollbar {
 display: none; /* Safari and Chrome */
}

Answer 30

You can use the code below to hide the scroll bar, but while still being able to scroll:

.element::-webkit-scrollbar { 
 width: 0 !important 
}