使用本机滚动时，使滚动条在离子内容中可见

Question

我使用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解决。

有谁知道怎么做？

Answer 1

@GerhardCarbó提出的答案是最接近我到目前为止找到的解决方案......它确实有点工作但是：

• 滚动条不会自动隐藏
• 动画非常生涩

所以我相信我现在坚持不使用滚动条。

另请注意，这在Android上的Google Chrome上运行正常，所以希望有一天它会被修复。 但为什么webview远远落后于chrome，我无法理解......

Answer 2

这可以通过离子内置滚动指令来完成。

<ion-scroll></ion-scroll>

看看这个： http ： //codepen.io/calendee/pen/nzeCy？edit = 1100