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.

Skittle

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

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 – Derrek

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.

Gwenny

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

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

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

@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 – Juratory

@GlennMaynardit it is not wrong maybe outdated. – Gwenny

This isn't working on macOS Chrome/Safari when "Show scroll bars" is not set to "always". Additionally, hard coding 17px is problematic. – Reynaud

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

Believe

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? – Dayfly

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

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

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

For obsolete Firefox -moz-scrollbars-none you can use @-moz-document url-prefix() { .container { overflow: hidden; } }. See #953361. – Catharine

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

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

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 – Derrek

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? – Derrek

I'd also mention, that you must have overflow: scroll for that to work/hide out-of-the-bounds part of content. – Evie

This hides both vertical and horizontal scrollbars while keeping the functionality. Is there a way to hide only the vertical scrollbar while keeping the function as well as keeping the horizontal scrollbar visible? – Suricate

I can confirm this works also on Androids (Chrome) and iPhones – Foregoing

this is working on firefox. – Scruggs

In case anyone needs this: scrollbar-width: none needs to be added to the html element if the top level content is the one that is overflowing. – Semiweekly

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

Cestoid

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

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

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

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

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 – Disgruntle

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

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

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) – Disconnection

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

Violette

scrollbar-width: none does not work in Firefox 91 – Atonement

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

I love this answer! My only problem is that it leaves a miniature 1px wide scrollbar. – Weathers

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

Babin

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

And what are thow specific css properties? – Skittle

either a hacky layout or jquery is an alternative – Babin

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

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; – Proxy

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: – Eyeglasses

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>

Impresa

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

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 */
}

Constitutive

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 – Rexrexana

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>

Vachel

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

I tested it in all new browsers before I answered to the question. Also FF. It has happenned some changes in FF? – Deaminate

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

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

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

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

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) – Violette

Answer 9

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.

Aleuromancy

Show me you problem in fiddle – Aleuromancy

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

Answer 10

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

Angele

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

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

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

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

In FF71 this blocks all scrolling. – Argybargy

Answer 11

Just write this code:

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

Or

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

Boat

How come this answer has so many upvotes? Question clearly says webkit-scrollbar does not work in firefox. – Radiocommunication

Answer 12

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 */
}

Bohemian

Answer 13

scrollbar-width: none; 

works for me.

Ronna

no mush support for this cross-browser at the time I'm posting caniuse.com/?search=scrollbar-width – Laveen

Answer 14

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

Stedt

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

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

Answer 15

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

Hexachord

Answer 16

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.

Shot

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

Answer 17

The following Sass styling should make your scrollbar transparent on most browsers (Firefox is not supported):

.hide-scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;

  &::-webkit-scrollbar {
    width: 1px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background-color: transparent;
  }
}

Milli

Answer 18

To hide scroll bars for elements with overflowing content use.

.div{

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

Marquez

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 – Bridgettebridgewater

@Bridgettebridgewater 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. – Marquez

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

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

Effortful

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

Vitellus

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

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

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.

Cohune

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>

Ciro

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

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 – Dray

Answer 23

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

Stonefly

Answer 24

This works for me:

scroll-content {
    overflow-x: hidden;
    overflow-y: scroll;
}

scroll-content::-webkit-scrollbar {
    width: 0;
}

Thynne

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>

Ionone

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

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

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

Aparicio

Answer 27

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

Hexone

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

Eros

Answer 29

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

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

Turkoman

Answer 30

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 400 pixels):

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

Dday

Answer 31

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*/
}

Uppermost

Answer 32

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 */
}

Napery

Answer 33

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 is hidden on the parent container, and overflow is auto on the child container. Simple.

Yahweh

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

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

@Muscovado 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/… – Yahweh

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

Answer 34

Another sort of hacky approach is to do overflow-y: hidden and then manually scroll the element with something like this:

function detectMouseWheelDirection(e) {
  var delta = null, direction = false;
  if (!e) { // If the event is not provided, we get it from the window object
    e = window.event;
  }
  if (e.wheelDelta) { // Will work in most cases
    delta = e.wheelDelta / 60;
  } else if (e.detail) { // Fallback for Firefox
    delta = -e.detail / 2;
  }
  if (delta !== null) {
    direction = delta > 0 ? -200 : 200;
  }
  return direction;
}

if (element.addEventListener) {
  element.addEventListener('DOMMouseScroll', function(e) {
    element.scrollBy({
      top: detectMouseWheelDirection(e),
      left: 0,
      behavior: 'smooth'
    });
  });
}

There's a great article about how to detect and deal with onmousewheel events in deepmikoto's blog. This might work for you, but it is definitively not an elegant solution.

Scabrous

Answer 35

This tricky solution works even on old Internet Explorer web browsers.

It's a workaround to the [ vertical scrollbar ]

<html>

<head>
  <style>
    html,
    body {
      overflow: -moz-scrollbars-vertical;
      overflow-x: hidden;
      overflow-y: hidden;
      height: 100%;
      margin: 0;
    }
  </style>
</head>

<body id="body" style="overflow:auto;height:100%" onload="document.getElementById('body').style.width=document.body.offsetWidth+20+'px'">
  <!--your stuff here-->
</body>

</html>

Just try it: jsfiddle

Chladek

Answer 36

I know this is a really old question, but here is a cool cross-browser solution utilizing only HTML and CSS.

HTML:

  <div class="barrel">
    <div class="clipper">
        <p class="clippercontent">Lorem</p>
    </div>
    <div id='navcontainer'>
      <p class="navcontent" >I want to be able to scroll through the whole page, but without the scrollbar being shown. Is there a way I can remove the scrollbar while still being able to scroll the whole page? With just CSS or HTML, please.
     </p>
    </div>
  </div>

Principle: The #navcontainer will house our .navcontent, and will have scrollbars. The .barrel will hide the scrollbar of the #navcontainer.

CSS:

.barrel{
  border: 0.8px solid #110011;
  position: relative;
  overflow: hidden;
}
.barrel #navcontainer{
  overflow: scroll; overflow-y: hidden;
  position: absolute;/* absolute positioned contents will not affect their parents */
  top: 0; left: 0; right: 0;
  white-space: nowrap;
}
/* style .clipper and .clippercontent, as a structural-image of #navcontainer and .navcontent respectively This will help .barrel have the same height as the #navcontainer */
.barrel .clipper{
  overflow: hidden;
  width: 0px;
  white-space: nowrap;
}
.navcontent, .clippercontent{
  padding: 3px 1px;
}

Yanirayank

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

Always good to find an improved solution. :) – Yanirayank

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

Answer 37

I added this and it's working for me

-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */

Ref : https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp

Amarillis

Answer 38

This post already has been answered by many, but I feel its solution could be much simpler.

/* Hide scrollbar for Chrome, Safari and Opera */

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

/* Hide scrollbar for Internet Explorer, Edge and Firefox */

.container {
    -ms-overflow-style: none;  /* Internet Explorer and Edge */
    scrollbar-width: none;  /* Firefox */
}

}

Note: The above method will just remove the visibility of the scrollbar, but it will still be functional. In case you want to remove scroll functionality, then you may use the below one:

container {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

Unit

This is attempting to answer a different question that was not asked. – Papillary

This works for me though I have to give the div 'overflow: overlay' so that the scrollbar space disappears (i'm working in Chrome) – Januaryjanuisz

Answer 39

Just set the width of the child's width to 100%, padding to 15 pixels, overflow-x to scroll and overflow:hidden for the parent and whatever width you want.

It works perfectly on all major browsers, including Internet Explorer and Edge with the exception of Internet Explorer 8 and lower.

Recitation

Answer 40

Hide both horizontal and vertical scroll bars.

See Fiddle here

HTML

 <div id="container1">
    <div id="container2">
    <pre>

Select from left and drag to right to scroll this very long sentence. This should not show scroll bar at bottom or on the side. Keep scrolling .......... ............ .......... ........... This Fiddle demonstrates that scrollbar can be hidden. ..... ..... ..... .....
    </pre>

    </div>
    <div>

CSS

* {
    margin: 0;
}
#container1 {
    height: 50px;
    width: 100%;
    overflow: hidden;
    position: relative;
}
#container2 {
    position: absolute;
    top: 0px;
    bottom: -15px;
    left: 0px;
    right: -15px;
    overflow: auto;
}

Encephaloma

Answer 41

Simply add this to your CSS file:

"&::-webkit-scrollbar": {
  display: "none",
  width: 0
},
"-ms-oveflow-style": "none" /* Internet Explorer and Edge */,
"scrollbar-width": "none" /* Firefox */,

Alforja

It doesn't look credible. Why the double quotes around, e.g., &::-webkit-scrollbar? What are they supposed to achieve? In any case, an explanation would be in order. E.g., what is the idea/gist? From the Help Center: "...always explain why the solution you're presenting is appropriate and how it works". Please respond by editing (changing) your answer, not here in comments (****** without ****** "Edit:", "Update:", or similar - the answer should appear as if it was written today). – Twentyfour

It seems to be recycling some of the previous answers, but with unexplained changes. Is there any merit to this answer? – Twentyfour

The W3C CSS Validator complains: 4 Parse Error "&::-webkit-scrollbar": { display: "none", width: 0 } and 6 Parse Error }, "-ms-oveflow-style": "none" /* Internet Explorer and Edge */, "scrollbar-width": "none" /* Firefox */, – Twentyfour

Is this a completely bogus answer? – Twentyfour

Answer 42

I wanted to remove the scrollbar an a single page on all browsers and after trying many of the suggestions, few of which worked at all for me, I found partial solutions for Chrome and Firefox and combining them, seems to work on Chrome, Edge, Firefox and Opera and assume will work on Safari.

/* Hide default scrollbar */
.page-id-xx,
html {
    scrollbar-width: none; /* FF */
}
::-webkit-scrollbar {
    width: 0px; /* Chrome & Edge */
}

Trident

Answer 43

I had this problem, and it is 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 }

It is super simple and should work with any browser.

Tiaratibbetts

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