Make scrollbar visible in ionic content when using native scroll

Question

I am using overflow-scroll = "true" to make ionic use native scrolling :

 <ion-content overflow-scroll = "true">
   <ion-list>
     <ion-item ng-repeat="foo in bar">
       {{foo.label}}
     </ion-item>
   </ion-list>
 </ion-content>

This really works great (performances are really good). The only problem is that the (vertical) scrollbar disappeared.

As per the documentation, I tried adding scrollbar-y="true" to ion-content, but that didn't work.

I also tried adding this to my css :

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 11px;
}

::-webkit-scrollbar:horizontal {
    height: 11px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white;
    background-color: rgba(0, 0, 0, .5);
}

::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
}

... but that didn't work either.

This article (look for "native scrolling") says that the problem can be solved using css, though.

Does anybody know how to do it ?

Solution

The answer suggested by @Gerhard Carbó is closest I've found to a solution so far... It does kind of work but :

• The scrollbar doesn't autohide
• Animation is very jerky

So I believe I'll stick with no scrollbar for now.

Also please note this works fine on Google Chrome on android, so hopefully it's going to be fixed someday. But why is webview is so much behind chrome, I fail to understand...

Comments

[ericraio]

were you able to get an answer for this?

[Gerard Carbó]

Watch this answer: stackoverflow.com/questions/22866285/… It worked for me...

[yannick1976]

@GerardCarbó yes it does kind of work, thanks ! I added this as a response so it will be easier to see for other viewers.