使用本机滚动时，使滚动条在离子内容中可见 [英] Make scrollbar visible in ionic content when using native scroll

问题描述

我使用 overflow-scroll =true使离子使用原生卷动：

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.

根据文档，我尝试添加 scrollbar-y =true到 ion-content ，但是无效。

As per the documentation, I tried adding scrollbar-y="true" to ion-content, but that didn't work.

我也尝试添加到我的css：

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;
}

...但无效。

本文（寻找本机滚动）说，问题可以使用css解决，虽然。

This article (look for "native scrolling") says that the problem can be solved using css, though.

有人知道如何做吗？

推荐答案

a href =http://stackoverflow.com/questions/22866285/phonegap-3-0-android-native-scrollbar-not-visible>由@GerhardCarbó建议的答案最接近我找到到目前为止的解决方案...它的工作，但是：

The answer suggested by @Gerhard Carbó is closest I've found to a solution so far... It does kind of work but :

• 滚动条不自动隐藏


• 动画非常不稳定

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

So I believe I'll stick with no scrollbar for now.

另外请注意，这在Android上的谷歌Chrome上工作正常，所以希望它会被修复有一天。但是为什么webview是如此之多的铬，我不明白...

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

这篇关于使用本机滚动时，使滚动条在离子内容中可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！