CSS hide scroll bar, but have element scrollable

Question

I have this element called items and the content inside the element is longer than the element height, I want to make it scrollable but hide the scroll bar, how would I do that?

<div class="left-side">
    <div
      class="items"
      style="display:block;width: 94%;margin: 0 auto;overflow: hidden;"
    >
    </div>
</div>

.left-side {
    height: 878px;
    padding-top: 20px;
    width: 1470px;
}

I tried setting the left-side class overflow to auto, but that didn't do anything.

Possible duplicate of [Hiding the scrollbar on an HTML page](http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) — Troyer, Apr 03 '17 at 13:36
"*[..]I want to make it scrollable but hide the scroll bar*" -- That would be horrible! Scrollbars have a purpose, and that purpose is to scroll. — Abhitalks, Apr 03 '17 at 13:36
Possible duplicate of [Hide scroll bar, but still being able to scroll](http://stackoverflow.com/questions/16670931/hide-scroll-bar-but-still-being-able-to-scroll) — Abhishek Pandey, Apr 03 '17 at 13:38
Yes, @Abhitalks is correct: that would break the usability of the page.Do hide the scrollbar if it is not needed; don't hide it if there is more content below the fold. https://www.nngroup.com/articles/scrolling-and-scrollbars/ — Yvonne Aburrow, Apr 03 '17 at 13:38

score 179 · Accepted Answer · edited Nov 10 '22 at 14:47

179

You can hide it:

html {
  overflow:   scroll;
}

::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

For further information, see: Hide scroll bar, but while still being able to scroll

edited Nov 10 '22 at 14:47

Saad

3,340
2
10
32

answered Apr 03 '17 at 13:41

Kiloumap Mrz

2,133
1
9
18

3

you could hide it, but it would be very poor usability. – Yvonne Aburrow Apr 03 '17 at 13:46
Here's a good complete reference: https://css-tricks.com/almanac/properties/s/scrollbar/ – Devang Mistry Nov 21 '17 at 07:31
3

Even in the provided link it states this doesn't work in FF or IE – DasBeasto Dec 18 '17 at 18:07
3

This only works on desktop chrome. It doesn't work on any other browser I've tested on. – whaley Dec 27 '18 at 22:21
4

why is ```background: transparent;``` needed? Wouldn't ```width: 0``` be enough? – adam.k Oct 24 '19 at 10:32
1

for horizontal scrollbar, it's pretty obvious but we'd set `height: 0;` – Masroor Dec 07 '20 at 08:47
Correct, `width: 0` is enough to hide a vertical scrollbar and `height: 0` to hide a horizontal one – Simone Jan 18 '21 at 13:15
::-webkit-scrollbar { display: none } This would be much better – Huzaifa Aug 26 '21 at 19:08
1

The classic "oh no, no, you should never do that". Some people think that if they can't think of a use for something, one doesn't exist – Glenn Maynard Jan 06 '23 at 04:05

score 86 · Answer 2 · edited Sep 11 '21 at 19:45

86

I combined a couple of different answers in SO into the following snippet, which should work on all, if not most, modern browsers I believe. All you have to do is add the CSS class .disable-scrollbars onto the element you wish to apply this to.

.disable-scrollbars::-webkit-scrollbar {
  background: transparent; /* Chrome/Safari/Webkit */
  width: 0px;
}
    
.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

And if you want to use SCSS/SASS:

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */

  &::-webkit-scrollbar {
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  }
}

edited Sep 11 '21 at 19:45

Esteban Borai

2,311
1
21
27

answered Jan 28 '19 at 21:07

danielricecodes

3,446
21
23

3

To have this rule apply to all children, `.disable-scrollbars * {` and `.disable-scrollbars *::-webkit-scrollbar {` – Meredith May 15 '19 at 10:31
add `height: 0;` next to width to also catch horizontal scrollbars – derpedy-doo May 09 '23 at 23:55

score 12 · Answer 3 · answered Jul 08 '20 at 22:31

12

Hope this helps

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

answered Jul 08 '20 at 22:31

Isaac Hunter

121
1
4

score 8 · Answer 4 · answered Mar 30 '18 at 22:53

8

Similar to Kiloumap L'artélon's answer,

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

works too

answered Mar 30 '18 at 22:53

hellomello

8,219
39
151
297

4

This only works on desktop chrome. It doesn't work on any other browser I've tested on. – whaley Dec 27 '18 at 22:20
1

`width: 0;` seems to hide the horizontal scrollbar, but leaves a weird empty gap on Chrome desktop 83. `display: none;` does not have this issue. I threw in both just to be safe. – cyqsimon Jun 29 '20 at 08:21

score 4 · Answer 5 · answered Mar 26 '20 at 17:56

4

work on all major browsers

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

answered Mar 26 '20 at 17:56

Chukwuemeka Maduekwe

6,687
5
44
67

score 3 · Answer 6 · edited Sep 14 '21 at 06:38

3

You can hide it on specific div usig class:

<div class="hide-scroll"></div>

.hide-scroll{
    overflow: scroll;
}

.hide-scroll::-webkit-scrollbar {
    background: transparent; /* make scrollbar transparent */
    width: 0px;
}

edited Sep 14 '21 at 06:38

Esteban Borai

2,311
1
21
27

answered Apr 16 '21 at 16:31

Rizwan

3,741
2
25
22

Yvonne Aburrow · Answer 7 · 2017-04-03T14:03:18.237

1

if you really want to get rid of the scrollbar, split the information up into two separate pages.

Usability guidelines on scrollbars by Jakob Nielsen:

There are five essential usability guidelines for scrolling and scrollbars:

Offer a scrollbar if an area has scrolling content. Don't rely on auto-scrolling or on dragging, which people might not notice.

Hide scrollbars if all content is visible. If people see a scrollbar, they assume there's additional content and will be frustrated if they can't scroll.

Comply with GUI standards and use scrollbars that look like scrollbars.

Avoid horizontal scrolling on Web pages and minimize it elsewhere.

Display all important information above the fold. Users often decide whether to stay or leave based on what they can see without scrolling. Plus they only allocate 20% of their attention below the fold.

To make your scrollbar only visible when it is needed (i.e. when there is content to scroll down to), use overflow: auto.

edited Apr 03 '17 at 14:03

answered Apr 03 '17 at 13:44

Yvonne Aburrow

2,602
1
17
47

4

This is nice and sensible, but sometimes you _really_ want to do things that sound strange without the context. For example, if you have a complex table component with one or more splitter, and the sections are scroll-synced, you only want the scrollbar on one section because it's obvious for the user that the whole thing is scrollable as one unit and individual scrollbars only add confusion. – Andy Mikhailenko Jan 21 '19 at 17:30
3

This doesn't really answer the question – Kalimantan Feb 26 '19 at 19:58
1

You effectively told the OP that what he is trying to do is wrong. There are cases where it is right (a carousel is the most common one). In the case of a carousel, there is some other UI element that indicates the drag capability (arrows rendered by the application and/or position dots). – Adam Leggett Apr 26 '20 at 17:22
so far this answer has had 7 upvotes and 5 downvotes. It seems that opinion is divided. If it was getting downvoted by everyone, I would just delete it, but since it's not, I am leaving it up. – Yvonne Aburrow Jan 20 '21 at 19:42

score 1 · Answer 8 · answered Apr 03 '17 at 14:06

1

You can make use of the SlimScroll plugin to make a div scrollable even if it is set to overflow: hidden;(i.e. scrollbar hidden).

You can also control touch scroll as well as the scroll speed using this plugin.

Hope this helps :)

answered Apr 03 '17 at 14:06

Sudipto

440
2
8

1

This plugin doesn't even work on its own demo page, so it's unlikely to be a good solution... – charlesdeb Jan 07 '22 at 16:36

Erik P_yan · Answer 9 · 2022-08-04T13:39:06.083

1

if you use sass, you can try this

&::-webkit-scrollbar { 
  width: 0px;
  background: transparent; /* make scrollbar transparent */
}

edited Aug 04 '22 at 13:39

answered Apr 05 '18 at 08:30

Erik P_yan

608
5
6

You haven't put any styles within this so this isn't going to do anything. – Sambuxc Aug 04 '22 at 12:39
Make sure that you put it on root, so it should work with html/body part. – Erik P_yan Sep 02 '22 at 05:50

score 0 · Answer 10 · answered Aug 03 '23 at 11:43

Just add this to your css and the job is done...

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  overflow: -moz-scrollbars-none;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}

CSS hide scroll bar, but have element scrollable

10 Answers10

Linked