在使用本地滚动时，在Ionic内容中使滚动条可见

Question

我正在使用 overflow-scroll = "true" 使 Ionic 使用原生滚动：

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

这真的很好用（性能非常好）。唯一的问题是（垂直）滚动条消失了。

根据文档，我尝试在ion-content中添加scrollbar-y="true"，但这并没有起作用。

我还尝试将以下内容添加到我的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;
}

...但这也没用。

这篇文章（查找“native scrolling”）指出，可以使用CSS解决这个问题。

有人知道怎么做吗？

- yannick1976

---

你能得到这个问题的答案吗？ - ericraio

看这个答案：https://dev59.com/Zn7aa4cB1Zd3GeqPpWFz对我有用... - Gerard Carbó

@GerardCarbó 是的，它有点起作用了，谢谢! 我把这个作为回复添加了进来，这样其他观众就能更容易地看到了。 - yannick1976

Answer 1

Gerhard Carbó提供的答案是我目前找到的最接近解决方案的方法... 它有点有效，但是：

• 滚动条不会自动隐藏
• 动画非常卡顿

所以我认为现在还是不使用滚动条比较好。

另外请注意，在安卓上使用Google Chrome时，这个方法可以正常工作，希望它总有一天能够被修复。但是为什么Webview落后于Chrome那么多，我无法理解...

- yannick1976

Answer 2

这可以通过Ionic内置的滚动指令来实现。

<ion-scroll></ion-scroll>

看这个: http://codepen.io/calendee/pen/nzeCy?editors=1100

- Salman Ghauri