Make overflow scroll bar visible on iOS and Android mobile

Question

How can I make the overflow scrollbar visible on mobile devices? The scrollbar is visible on desktops but not on mobile devices. I need it to show on iPhones and Samsungs. So also Safari browsers. Is that even posibble?

This is what I have for now.

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(77, 168, 65, 1); 
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}

::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(77, 168, 65, 1); 
}

Possible duplicate of [How do I get scrollbars to show in Mobile Safari?](https://stackoverflow.com/questions/3512885/how-do-i-get-scrollbars-to-show-in-mobile-safari) — Itay Gal, Nov 18 '18 at 14:50
@ItayGal Please do not redirect me to a post that is 8 years old. That info does not even work anymore. I have seen that post and tested. Does not work. — Chocoprins18, Nov 18 '18 at 14:53
It worked for me a month ago, no reason to answer the same question twice — Itay Gal, Nov 18 '18 at 14:54
@ItayGal, I need to force it to show on mobile. Not desktop. These answers are all for desktop views. I need to have the scrollbar always visible on mobile views also. If that post helped you out. Then answer my post by helping to implement that what has worked for you a month ago. — Chocoprins18, Nov 18 '18 at 14:59
Read carefully: this is for mobile `-webkit-overflow-scrolling: touch` — Itay Gal, Nov 18 '18 at 18:27

score 1 · Answer 1 · answered Nov 18 '18 at 15:31

Apple made the conscious decision to HIDE scrollbars in iOS at the system level until there's an interaction. Mac OS (including Safari) and Android quickly followed that decision.

To the best of my knowledge, only the end user can override this setting and its system global.

The suggestion of finding a library to rebuild the scrollbars as discussed in How do I get scrollbars to show in Mobile Safari remains the best solution.

That said, I would have a VERY GOOD REASON before trying to force scrollbars on mobile devices. Users are trained not to need them and they take up pointless space on an already small screen.

Make overflow scroll bar visible on iOS and Android mobile

1 Answers1