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 ?

Watch this answer: stackoverflow.com/questions/22866285/… It worked for me... — Gerard Carbó
– Gerard Carbó, Commented Sep 29, 2015 at 11:06
@GerardCarbó yes it does kind of work, thanks ! I added this as a response so it will be easier to see for other viewers. — yannick1976
– yannick1976, Commented Oct 9, 2015 at 15:24

Community · Accepted Answer · 2017-05-23 12:24:41Z

4

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

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered Oct 9, 2015 at 15:21

yannick1976

11.7k2 gold badges22 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salman Ghauri · Accepted Answer · 2016-07-11 13:56:13Z

-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

answered Jul 11, 2016 at 13:56

Salman Ghauri

5941 gold badge6 silver badges16 bronze badges

Collectives™ on Stack Overflow

Make scrollbar visible in ionic content when using native scroll

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related