6

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?

FairyQueen
  • 2,283
  • 7
  • 37
  • 57
  • 1
    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. As, like I said, I believe the bars fade to invisible when not in use. – Leeish Feb 12 '13 at 22:19
  • Even the iScroll demo: http://cubiq.org/iscroll doesn't have them show up all the time, only when in use, and iScroll is sort of a catch all for forced scrolling options. I am going to state, it can't be done. – Leeish Feb 12 '13 at 22:22

1 Answers1

13

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

joseantgv
  • 1,943
  • 1
  • 26
  • 34
  • 5
    Thanks! This did work, but if you also choose to enable the inertia scrolling with `-webkit-overflow-scrolling: touch;` then this will override the scrollbar appearance (and make them not appear typically) – nothingisnecessary Mar 29 '16 at 19:09
  • @nothingisnecessary Answer updated. It 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;` – joseantgv Jan 09 '20 at 08:14