Сделать полосу прокрутки видимой в ионном контенте при использовании естественного прокрутки

Я использую overflow-scroll = "true" чтобы выполнить естественную прокрутку с помощью ионного использования:

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

Это действительно отлично работает (выступления действительно хороши). Единственная проблема заключается в том, что (вертикальная) полоса прокрутки исчезла.

В соответствии с документацией , я попытался добавить scrollbar-y="true" к ion-content , но это не сработало.

Я также попытался добавить это в свой 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; } 

… но это тоже не сработало.

В этой статье (смотрите «родная прокрутка») говорится, что проблема может быть решена с помощью css.

Кто-нибудь знает, как это сделать?

Ответ, предложенный @Gerhard Carbó, близок к тому, что я нашел решение до сих пор … Это работает, но:

  • Полоса прокрутки не скрывает
  • Анимация очень рыхлая

Поэтому я считаю, что на данный момент я не буду использовать полосу прокрутки.

Также обратите внимание, что это отлично работает в Google Chrome на Android, поэтому, надеюсь, он будет исправлен когда-нибудь. Но почему webview так сильно отстает от хром, я не понимаю …

Это можно сделать с помощью ионной встроенной директивы прокрутки.

 <ion-scroll></ion-scroll> 

Проверьте это: http://codepen.io/calendee/pen/nzeCy?editors=1100