3

For the very first time I am working on iPhone App using JQueryMobile + PhoneGap. I have a div container which acts like a popup and I have given it a max-height, with overflow:auto and -webkit-overflow-scrolling: touch.

I wanted to make the scroller always visible and tried this css rules ( for testing I used the same psedu both on element and as a global style. But not sure if it works this way! )..

.info-wrapper-content::-webkit-scrollbar, ::-webkit-scrollbar {
-webkit-appearance: none;width: 8px;
height: 13px;
}
.info-wrapper-content::-webkit-scrollbar-thumb:vertical{
height: 50px;
    background-color: #D95649;
    -webkit-border-radius: 0px;
    visibility: visible;
}

It's working great on Desktop Safari or Chrome and it's always visible!But Not on Mobile Safari or Phonegap Application! Is ::-webkit-scrollbar is supported by Mobile Safari?

I really don't wanted to use any additional scroll plugin like iScroll. What's the problem? Why the same code is behaving different? Please do some advice.

Shajed Evan
  • 503
  • 6
  • 15
  • which scroll then you have used . I need help for my app . – Asteriskiiii Mar 01 '13 at 09:06
  • @PhoneGapDeveloper.It Depends on IOS version too! Working IOS 5 but and it keeps visible, but not working on IOS 6. It's only visible on scroll.I finally had to adopt jScrollPane to make it work. – Shajed Evan Mar 08 '13 at 19:17

2 Answers2

0

i think you should look at this .. it is a similar question someone asked before..

seems mobile safari does not support overflow property hence the scrollbars are not shown.

i did found a link for you that might help but i have not tested it myself, you can try it out

Community
  • 1
  • 1
Dilberted
  • 1,172
  • 10
  • 23
0

Those properties basically tell the browser to take the standard, always visible scrollbar and adjust its appearance a bit. A permanently visible scrollbar simply doesn't exist on iOS, so they don't do anything.

While there are plugins that will create a fake scrollbar using regular html elements, do you really want to build something that looks out of place on iOS?

If the reason for a scrollbar is simply to tell the user that scrolling is possible, try adjusting the element heights so that the last item in the list is only half visible.

Tom Clarkson
  • 16,074
  • 2
  • 43
  • 51
  • Well that always visible scrollbar is a client requirement so have to do it any how. I tried iScroll but in few cases auto initializations is making problem on some pages in JQuery Mobile. That's why I removed that and trying to achieve the same look and feel using -webkit-scrollbar – Shajed Evan Nov 19 '12 at 10:20