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? The css you provided should force a scrollbar to be present all the time. — sg3s
– sg3s, Commented Sep 20, 2011 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
– Shawn Steward, Commented Sep 20, 2011 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
– Jambo, Commented Sep 20, 2011 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
– Jambo, Commented Sep 20, 2011 at 22:01

cobberboy · Accepted Answer · 2020-03-05 07:29:03Z

513

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 5, 2020 at 7:29

cobberboy

6,3252 gold badges31 silver badges23 bronze badges

answered Apr 11, 2012 at 5:19

NoviceCoding

6,4192 gold badges29 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

18 Comments

crmpicco Over a year ago

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.

futbolpal Over a year ago

Is there a way to make this only apply for a specific class?

Chase Finch Over a year ago

@futbolpal yes, this seems to work in a class; try .classname ::-webkit-scrollbar

BritishSam Over a year ago

how can i get this to work horizontal? bar shows up for vertical scroll but not horizontal scroll

Liran H Over a year ago

Works well. Add height to the ::-webkit-scrollbar if you don't want a very chunky horizontal scrollbar

|

Greg Sadetsky · Accepted Answer · 2021-06-30 23:26:45Z

27

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, 2021 at 23:26

Greg Sadetsky

5,1392 gold badges44 silver badges52 bronze badges

5 Comments

Michael Terry Over a year ago

The dude in the link says he wants to always show a scrollbar and that's still working, e.g., mcmaster.com.

Nishanth Vemula Over a year ago

@MichaelTerry In Chrome yes. In Safari and Firefox, No.

Michael Terry Over a year ago

@Nishanth Works on Safari desktop on Monterey

Kalnode Feb 25 at 22:20

AFAICT, in that forum, the context is "customization-of-scrollbars-via-css". You can still have truly custom scrollbars just building them from scratch using JS... or like many people do, use a custom scrollbar library (there's many that are matured and proven).

Nelson May 20 at 7:57

The fact that we now need a custom JS library for scrollbar is a massive step backwards.

Razan Paul · Accepted Answer · 2017-04-24 01:47:56Z

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, 2017 at 1:47

Razan Paul

13.9k3 gold badges74 silver badges61 bronze badges

2 Comments

Petya Naumova Over a year ago

Is it possible to have both in our css - webkit-overflow-scrolling: touch and the scrollbars?

Alter Lagos Over a year ago

Just in case, but webkit-overflow-scrolling isn't really supported by any current browser.

Community · Accepted Answer · 2017-05-23 12:34:37Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Nov 21, 2013 at 0:00

JStarcher

1441 silver badge5 bronze badges

2 Comments

OGHaza Over a year ago

Be aware that this question was asked 2 years ago, before iOS6 even existed.

TigerBear Over a year ago

webkit is safari chrome only. You will need to target the Firefox specific engine

Philippe Krief · Accepted Answer · 2025-06-24 08:28:59Z

0

To fix the problem on my Ma, I had to turn on the option "Show scroll bars" to "Always":
enter image description here
Hope it helps

answered Jun 24 at 8:28

Philippe Krief

11 bronze badge

Comments

Michael Phelps · Accepted Answer · 2024-04-16 04:45:18Z

You could just jitter the scrollbar back and forth a pixel on an interval :)

Tested and works on Chrome and Firefox for macOS (14.4.1).

Doesn't work on Chrome for Android (14) with One UI (6.1) after the first interaction.

document.querySelectorAll('.scrollable-container').forEach((container) => {
    function ensureScrollVisible() {
        // Vertical scroll bar
        if (container.scrollTop === 0) {
            container.scrollTop += 1;
            container.scrollTop -= 1;
        } else {
            container.scrollTop -= 1;
            container.scrollTop += 1;
        }

        // Horizontal scroll bar
        if (container.scrollLeft === 0) {
            container.scrollLeft += 1;
            container.scrollLeft -= 1;
        } else {
            container.scrollLeft -= 1;
            container.scrollLeft += 1;
        }
    }

    ensureScrollVisible();
    setInterval(ensureScrollVisible, 250);
});

.scrollable-container {
  width: 100px;
  height: 100px;
  overflow: auto;
  border: 1px solid #e1e4e8;
}

.oversized-content {
  white-space: nowrap;
}

<div class="scrollable-container">
  <div class="oversized-content">
    <ul>
      <li>Sphinx</li>
      <li>of</li>
      <li>black</li>
      <li>quartz,</li>
      <li>judge</li>
      <li>my</li>
      <li>vow</li>
    </ul>
  </div>
</div>

<div class="scrollable-container">
  <div class="oversized-content">
    <p>Sphinx of black quartz, judge my vow</p>
  </div>
</div>

<div class="scrollable-container">
  <div class="oversized-content">
    <ul>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
      <li>Sphinx of black quartz, judge my vow</li>
    </ul>
  </div>
</div>

Collectives™ on Stack Overflow

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

6 Answers 6

18 Comments

5 Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

18 Comments

5 Comments

2 Comments

2 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related