Geek Answers Handbook

Make scrollbar visible in ionic content using natural scroll

I use overflow-scroll = "true" to do a natural scroll using ionic use:

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

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

According to 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 at the "native scrolling") says that the problem can be solved with css.

Does anyone know how to do this?

+6
source share
2 answers

The answer suggested by @Gerhard Carbó is close to what I have found for the solution so far ... It really works, but:

  • The scroll bar is not an auto guide.
  • The animation is very jerky

So, I believe that at the moment I will not use the scroll bar.

Also note that this works fine in Google Chrome on Android, so hopefully it will be fixed someday. But why web browsing is so far behind chrome, I don’t understand ...

+4
source

This can be done using the ion built-in scroll directive.

 <ion-scroll></ion-scroll>

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

0
source

More articles:


All Articles