In the Settings window, click the “Ease of Access” category. On the left side of the Ease of Access screen, click the “Display” option. On the right, turn off the “Automatically Hide Scroll Bars In Windows” toggle to make sure your scrollbars don't disappear anymore.
Use overflow: auto . Scrollbars will only appear when needed. (Sidenote, you can also specify for only the x, or y scrollbar: overflow-x: auto and overflow-y: auto ).
For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: HTML. CSS.
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
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With