Geek Answers Handbook

Mobile webkit scroll bars

I'm currently trying to set up overflow on the div surrounding the table, for this I use a specific webkit style

.overflow::-webkit-scrollbar { width:30px; } .overflow::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 15px; border-radius: 15px; } .overflow::-webkit-scrollbar-thumb { -webkit-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); background:#f00; }

They work great on desktop browsers, but don't work on mobile devices.

Is there a problem that mobile browsers just don't support this? Or will support be provided in the near future?

I have seen several Javascript based solutions, but all of this adds a little too much bloat to just draw a scroll bar in webkit based browsers.

+4
source share
3 answers

You cannot create your own scrollbar on a mobile phone, and I doubt you will ever be able, sorry.

I can’t say why with any authority, but all phones and OS use different browsers, and each of them will have its own implementation of the scroll bar. Many of them used the iOS fading scrollbar approach, which means that there aren’t so many styles anyway.

This really limits the use of custom solutions.

0
source

I think you should use a custom scrollbar. For a custom scrollbar, the jquery "jscrollPane" scrollbar is used. You must download this file: ScrollPanel.js, jquery.mousewheel.js, jquery.jscrollpane.min.js, jquery.jscrollpane.js, jquery.jscrollpane.css

For more information, follow this link: http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html

0
source

mobile safari doesn't support scrolling div, you can use iscoll infrastructure

-1
source

More articles:


All Articles