Make scrollbar visible in ionic content when using

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 ?

Answer 1

This can be done by ionic built in scroll directive.

<ion-scroll></ion-scroll>

Check this out: http://codepen.io/calendee/pen/nzeCy?editors=1100

Answer 2

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...