Menu
I am having trouble getting a scroll bar to appear in mobile safari because overflow: auto does not work when there is scroll-able content. I found this css property:
-webkit-overflow-scrolling: touch
as some suggested this is a fix for mobile safari hiding the scroll bars but it's not working for me. Anyone have any suggestions on how I can force there to be a scroll bar in mobile safari to give the user a visual that they are supposed to scroll?
899
I believe in iOS the scroll bar fades into the background when not in use. I don't believe you can force those little bars to display. - webkit-overflow-scrolling is only to force the scroll to be there, not necessarily to show the scroll bars I believe.
How To Force / Always Show Scrollbars Add overflow: scroll;to show both the horizontal and vertical scrollbar: Example body { overflow: scroll; /* Show scrollbars */ Try it Yourself » To only show the vertical scrollbar, or only the horizontal scrollbar, use overflow-yor overflow-x:
I am on Mac OS X and also in Safari browser windows the scroll bar sometimes isn't there, however in System Preferences there isn't a General option, and when I went on Appearance which seems is where the options of scroll bar behaviour are, there were no three options that I could choose Always from.
Here’s how to hide the tab bar—or how to get it back. First, open Settings on your iPad by tapping the grey “gear” icon. Sorry, the video player failed to load. (Error Code: 100013) In Settings, scroll down through the sidebar and tap “Safari.” In Safari settings, swipe upward until you locate the “Tabs” section.
In your CSS include:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
height: 7px;
-webkit-overflow-scrolling: auto;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0,0,0,.5);
-webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
Customize the appearance as needed.
Stackoverflow source
Original source
95
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
