CODEWITHSUNDEEP
htmlcssgoogle-chromeinternet-explorerfirefox
user_2215528
user_2215528

Reputation: 19987

Hide scroll bar, but while still being able to scroll

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.

Upvotes: 1965

Views: 3035539

Answers (30)

Hristo Eftimov
Hristo Eftimov

Reputation: 15703

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;

UPDATED:

scrollbar-width: none; now also works in Chrome & Safari: caniuse.com/?search=scrollbar-width. Credits to @loomchild

Upvotes: 997

Alexander
Alexander

Reputation: 528

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

Upvotes: 16

Ali Hajiloo
Ali Hajiloo

Reputation: 182

no-scrollbar::-webkit-scrollbar {
  width: 7px;
  height: 4px;
  display: none;
}
no-scrollbar::-webkit-scrollbar:hover {
  width: 7px;
  height: 4px;
}
/* Track */
no-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
/* Handle */
no-scrollbar::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}
/* Handle on hover */
no-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #1890ff;
}

don't doubt

Upvotes: 0

Joachim
Joachim

Reputation: 311

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

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

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

Upvotes: 1

Malae
Malae

Reputation: 73

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

Upvotes: 3

Hilla
Hilla

Reputation: 77

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

Upvotes: 6

geoyws
geoyws

Reputation: 3687

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.

Upvotes: 2

Sergio Mcfly PYK
Sergio Mcfly PYK

Reputation: 4291

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

Upvotes: 1

Visal
Visal

Reputation: 477

Just write this code:

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

Or

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

Upvotes: 31

Majedur
Majedur

Reputation: 3242

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>

Upvotes: 84

Alvin Moyo
Alvin Moyo

Reputation: 218

To hide scroll bars for elements with overflowing content use.

.div{

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

Upvotes: 12

Sehrish Waheed
Sehrish Waheed

Reputation: 1555

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

Upvotes: 0

Abhigyan
Abhigyan

Reputation: 385

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

Upvotes: 1

Ismail Hamdach
Ismail Hamdach

Reputation: 127

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

Upvotes: 1

Sensei Zaid
Sensei Zaid

Reputation: 363

scrollbar-width: none;

works for me.

Upvotes: 20

Eliran Assaraf
Eliran Assaraf

Reputation: 348

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

Upvotes: 20

Muhammad Ibrahim
Muhammad Ibrahim

Reputation: 321

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

Upvotes: 5

Anirban Bhui
Anirban Bhui

Reputation: 6493

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

Upvotes: 619

RAMAMAYI NAOREM
RAMAMAYI NAOREM

Reputation: 349

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

Upvotes: 14

Wael Khalifa
Wael Khalifa

Reputation: 935

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

Upvotes: 47

Murhaf Sousli
Murhaf Sousli

Reputation: 13286

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

Upvotes: 34

Tienanhvn
Tienanhvn

Reputation: 269

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

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

Upvotes: 4

AnupRaj
AnupRaj

Reputation: 671

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

Upvotes: 0

mangesh
mangesh

Reputation: 365

This works for me: 

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

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

Upvotes: 7

Meloman
Meloman

Reputation: 3712

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

Upvotes: 14

stamat
stamat

Reputation: 1979

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

Upvotes: 3

Lucile Fievet
Lucile Fievet

Reputation: 509

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

Upvotes: 5

Gark Garcia
Gark Garcia

Reputation: 460

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.

Upvotes: 2

Richrd
Richrd

Reputation: 7122

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:

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

Upvotes: 600

Doua Beri
Doua Beri

Reputation: 10939

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

Upvotes: 9

Related Questions