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

问题描述

我正在使用 overflow-scroll = "true" 使 ionic 使用本机滚动:

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.

有人知道怎么做吗?

推荐答案

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

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 上的谷歌浏览器上运行良好，所以希望有一天它会被修复.但是为什么 webview 远远落后于 chrome，我无法理解...

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

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