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

css macos scroll overflow

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.

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.

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

Damn, my bad! It is a feature in Lion. I should really read what I'm buying before I buy it... Thanks guys!

cobberboy

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

Example

customize the apperance as needed. Source

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.

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

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

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

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

Razan Paul

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.

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

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

Greg Sadetsky

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.

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

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

@Nishanth Works on Safari desktop on Monterey

Community

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.

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

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

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

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US