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

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

@Gerhard Carb\xc3\xb3 建议的答案是我迄今为止找到的最接近的解决方案......它确实有效，但是：

\n\n

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

\n\n

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

\n\n

另请注意，这在 Android 上的 Google Chrome 上运行良好，因此希望有一天它能得到修复。但为什么 webview 落后 chrome 这么多，我无法理解......

\n