Hide vertical scrollbar whilst remaining scrollable

Question

I want the vertical scrollbar for my div to be invisible, but still allow vertical scrolling.

I've tried using overflow-y: hidden but that disables scrolling.
I've tried webkit element::-webkit-scrollbar but that affects horizontal scrollbars too.

I would have thought that webkit's :vertical state would allow me to do it but it doesn't do anything. See codepen: (https://codepen.io/numberjak/pen/MWgOMqd)

Other questions look at BOTH scrollbars, I just care about ONE scrollbar.

<div class="scroll"><div class="large-content"/></div>

.scroll {
  overflow: auto;
  max-width: 20rem;
  max-height: 20rem;
  background-color: black;
}

.scroll::-webkit-scrollbar:vertical {
  display: none;
}

.large-content {
  min-width: 100rem;
  min-height: 100rem;
  background-color: red;
}

Possible duplicate of [Hide scroll bar, but while still being able to scroll](https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll) — 9841pratik, Sep 05 '19 at 09:04
This will be really hard (if not impossible) to do, especially if you want crossbrowser support, as scrollbar-styling is still pretty basic. I'd suggest you use a JS scrollbar, e.g. https://github.com/buzinas/simple-scrollbar — elveti, Sep 05 '19 at 10:04

score 0 · Answer 1 · answered Sep 05 '19 at 09:04

0

Try this css code..

css

.large-content {
    background-color: red;
    width: 100%;
    height: 100%;
}

answered Sep 05 '19 at 09:04

Manikandan2811

831
4
9

I don't see how this helps with my problem – numberjak Sep 05 '19 at 09:11
Its working for remove the horizontal scrollbar? Can u explain it clearly? – Manikandan2811 Sep 05 '19 at 09:14

score 0 · Answer 2 · answered Sep 05 '19 at 09:05

You can do the following to hide scrollbars:

-webkit- (Chrome, Safari, newer versions of Opera):

.scoll::-webkit-scrollbar { width: 0 !important; }

-moz- (Firefox):

.scroll { overflow: -moz-scrollbars-none; }

-ms- (Internet Explorer +10):

.scroll { -ms-overflow-style: none; }

Important points to be considered before hiding the scroll bar:

Preferably hide scrollbars only if and when all content is visible else the user may skip the content.
Avoid horizontal scrolling on web pages and do not hide horizontal scroll bar as they can make content difficult to read
If at all, hiding scroll is required: Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.

Reference

These affect horizontal scroll bars too. I ONLY want vertical scroll bar hidden. — numberjak, Sep 05 '19 at 09:08

Hide vertical scrollbar whilst remaining scrollable

2 Answers2