CSS - Overflow: Scroll; - Always show vertical scroll bar?

Question

So currently I have:

#div {
  position: relative;
  height: 510px;
  overflow-y: scroll;
}

However I don't believe that it will be obvious to some users that there is more content there. They could scroll down the page without knowing that my div actually contains a lot more content. I use the height 510px so that it cuts off some text so on some pages it does look like that there is more content, but this doesn't work for all of them.

I am using a Mac, and in Chrome and Safari the vertical scroll bar will only show when the mouse is over the Div and you actively scroll. Is there a way to always have it displaying?

Uhm, can you recreate this exact behaviour on [jsfiddle](http://jsfiddle.net/)? The css you provided should force a scrollbar to be present all the time. — sg3s, Sep 20 '11 at 21:38
Yeah, sounds like you have some other CSS quirks going on to cause that, this should display the scrollbar always. Make sure the div's wrapping this one are styled properly. — Shawn Steward, Sep 20 '11 at 21:42
I am running Lion! Maybe that's it? I'll open a virtual machine and see what it's like on the windows side of things... — Jambo, Sep 20 '11 at 21:54
Damn, my bad! It is a feature in Lion. I should really read what I'm buying before I buy it... Thanks guys! — Jambo, Sep 20 '11 at 22:01

score 488 · Accepted Answer · edited Mar 05 '20 at 07:29

488

Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.

The fix: In your css include -

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

/* always show scrollbars */

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}


/* css for demo */

#container {
  height: 4em;
  /* shorter than the child */
  overflow-y: scroll;
  /* clip height to 4em and scroll to show the rest */
}

#child {
  height: 12em;
  /* taller than the parent to force scrolling */
}


/* === ignore stuff below, it's just to help with the visual. === */

#container {
  background-color: #ffc;
}

#child {
  margin: 30px;
  background-color: #eee;
  text-align: center;
}

<div id="container">
  <div id="child">Example</div>
</div>

customize the apperance as needed. Source

edited Mar 05 '20 at 07:29

cobberboy

5,598
2
25
22

answered Apr 11 '12 at 05:19

NoviceCoding

6,145
2
27
33

7

Should this also work on the iPad with Safari? I am on an iPad 2 running iOS 6.1.3 and it does not work. – crmpicco Aug 20 '13 at 11:08
1

Works great. You will also probably want to put a background-color on the scrollbar itself. If the thumb is very small because the div is really long, it will not be enough of a visual cue to the user. I recently did this in an iPad app using a 0.25 alpha for the scrollbar background, 1.0 alpha for the thumb and a 20px width. Looks good. – huygir Dec 06 '13 at 15:49
9

Is there a way to make this only apply for a specific class? – futbolpal Apr 24 '14 at 21:25
2
Worked for me only after I set 'overflow: auto' on the container (in my case, a
– Rob Campion Nov 28 '14 at 14:52
10

@futbolpal yes, this seems to work in a class; try .classname ::-webkit-scrollbar – Chase Finch Feb 06 '15 at 21:08
1

I used same css but It works only in chrome and in other browsers it display default scrollbar..I no its old post but if someone know about it then help me plz.. – Dhara Aug 04 '15 at 10:48
1

Messes with drag-scrollbar-to-scroll, 4/10, wouldn't recommend. – fxck Sep 15 '15 at 15:03
awesome dude but as pointed out by others on Safari it's not showing for all – aWebDeveloper Apr 27 '16 at 10:01
1

Any suggestion on how to add this to a div but not cause the containing content to become 7px narrower? Instead, keeping the scrollbar on top of the content? – YWCA Hello Sep 21 '16 at 18:24
2

Works on OSX Safari, but not on iPad Safari ;( – JackKalish Feb 09 '17 at 21:50
2

On OSX 10.11.6: Works in Chrome 62 and Safari 10.1.2. Doesn't work in Firefox 57. – Kalnode Nov 27 '17 at 04:09
4

how can i get this to work horizontal? bar shows up for vertical scroll but not horizontal scroll – BritishSam Nov 28 '17 at 16:27
8

Works well. Add `height` to the `::-webkit-scrollbar` if you don't want a very chunky horizontal scrollbar – Liran H Jul 11 '19 at 13:39
Is this just an OS X thing or does this impact IE / windows browsers? – Brendan Metcalfe May 13 '21 at 19:10
You may also find it beneficial to customize `::-webkit-scrollbar-track` as well. – gsgx Sep 20 '22 at 19:54
very nice, we even had a bug report where a user thought bottom borders were being cut off in select dropdowns, when really there was a scrollbar there hiding until hovered directly over it! – Akin Hwan Apr 14 '23 at 01:48
Is there a solution for new iOS not supporting scrollbar customizations ? – noiseymur Aug 31 '23 at 15:22

score 23 · Answer 2 · answered Jun 30 '21 at 23:26

23

For anyone coming here in 2021 and later years:

"Custom scrollbars are no longer supported in iOS 14."

according to an official "Frameworks Engineer" on the developer.apple.com forums.

answered Jun 30 '21 at 23:26

Greg Sadetsky

4,863
1
38
48

The dude in the link says he wants to always show a scrollbar and that's still working, e.g., mcmaster.com. – Michael Terry May 03 '22 at 02:32
2

@MichaelTerry In Chrome yes. In Safari and Firefox, No. – Nishanth Vemula May 15 '22 at 16:29
@Nishanth Works on Safari desktop on Monterey – Michael Terry May 18 '22 at 01:09

score 17 · Answer 3 · answered Apr 24 '17 at 01:47

17

Please note on iPad Safari, NoviceCoding's solution won't work if you have -webkit-overflow-scrolling: touch; somewhere in your CSS. The solution is either removing all the occurrences of -webkit-overflow-scrolling: touch; or putting -webkit-overflow-scrolling: auto; with NoviceCoding's solution.

answered Apr 24 '17 at 01:47

Razan Paul

13,618
3
69
61

3

Is it possible to have both in our css - webkit-overflow-scrolling: touch and the scrollbars? – Petya Naumova Jul 05 '17 at 14:42
Just in case, but `webkit-overflow-scrolling` [isn't really supported](https://caniuse.com/?search=webkit-overflow-scrolling) by any current browser. – Alter Lagos Jul 11 '22 at 03:38

score 3 · Answer 4 · edited May 23 '17 at 12:34

3

This will work with iPad on Safari on iOS 7.1.x from my testing, I'm not sure about iOS 6 though. However, it will not work on Firefox. There is a jQuery plugin which aims to be cross browser compliant called jScrollPane.

Also, there is a duplicate post here on Stack Overflow which has some other details.

edited May 23 '17 at 12:34

Community

1
1

answered Nov 21 '13 at 00:00

JStarcher

144
1
5

5

Be aware that this question was asked 2 years ago, before iOS6 even existed. – OGHaza Nov 21 '13 at 00:20
webkit is safari chrome only. You will need to target the Firefox specific engine – TigerBear Jan 27 '17 at 11:07

CSS - Overflow: Scroll; - Always show vertical scroll bar?

4 Answers4

Linked

Related