How do I show scrollbar when using native scrolling?


#1

Hello all !

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.

I am using ionic 1.0.1 and testing on android 5.1.1 / samsung galaxy s6.

As per the [documentation][1], 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][2] (look for “native scrolling”) says that the problem can be solved using css, though.

Does anybody know how to do it ?

Thanks in advance,

Yannick
[1]: http://ionicframework.com/docs/api/directive/ionContent/
[2]: http://www.thomasmaximini.com/2015/01/12/improving-scroll-performance-for-lists-in-ionic-framework.html


#2

@yannick1976
Did you find any solution for this?