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? — Itay Gal
– Itay Gal, Commented Nov 18, 2018 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
– Chocoprins18, Commented Nov 18, 2018 at 14:53
It worked for me a month ago, no reason to answer the same question twice — Itay Gal
– Itay Gal, Commented Nov 18, 2018 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
– Chocoprins18, Commented Nov 18, 2018 at 14:59
Read carefully: this is for mobile -webkit-overflow-scrolling: touch — Itay Gal
– Itay Gal, Commented Nov 18, 2018 at 18:27

Bryce Howitson · Accepted Answer · 2018-11-18 15:31:24Z

0

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.

answered Nov 18, 2018 at 15:31

Bryce Howitson

7,78824 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Make overflow scroll bar visible on iOS and Android mobile

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related