【问题标题】:Phonegap 3.0 - Android: Native Scrollbar Not VisiblePhonegap 3.0 - Android:本机滚动条不可见
【发布时间】:2014-04-04 15:00:12
【问题描述】:

我目前正在将一个非常大的 PhoneGap 应用程序上的滚动行为从第三方 JavaScript 滚动库转换为原生滚动。一切都很顺利,除了Android版本的原生滚动从不显示滚动条。

滚动行为正常工作,但没有显示滚动条来向用户提供有关屏幕上滚动位置的反馈。

我怀疑这是某种配置或 CSS 问题,但我尝试修改 CSS 和其他 Android 配置文件(如清单和活动文件)无济于事。

如何在 PhoneGap Android 上使用原生滚动启用可见滚动条?

注意:对第三方滚动解决方案(例如 iScroll)感兴趣。从 iScroll 的转换已经完成了 90%,除了 Android 上的可见滚动条问题。

【问题讨论】:

    标签: javascript android cordova scroll


    【解决方案1】:

    我自己可以通过使用仅在 Android 上应用的 Webkit 滚动条 CSS 来实现这一点。我使用

    将 android-scroll-bar 类添加到 Android 上的页面
    $('html').addClass('android-scroll-bar');
    

    这是必要的 CSS:

    .android-scroll-bar ::-webkit-scrollbar {width: 5px;}
    
    .android-scroll-bar ::-webkit-scrollbar-track { border-radius: 10px;}
    
    .android-scroll-bar ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgb(169,169,169); }
    
    .android-scroll-bar ::-webkit-scrollbar-thumb:window-inactive {background: rgb(128,128,128); }
    

    【讨论】:

    • 我怎样才能改变那个栏的颜色?
    • 滚动条只会在滚动完成后改变位置。这是正常的吗?或者更好我该如何解决这个问题?
    • @user2428759:我有一个可滚动的 div,并且我添加了已在此处回答的相同类。但这适用于 iOS 和 Nexus Android 并显示滚动条。但同样不适用于三星 Galaxy 设备。有什么想法吗?
    【解决方案2】:

    如何为 Windows 应用添加滚动条,因为以下代码在 Windows 应用(Phonegap)中不起作用

    android-scroll-bar ::-webkit-scrollbar {width: 5px;}
    
    .android-scroll-bar ::-webkit-scrollbar-track { border-radius: 10px;}
    
    .android-scroll-bar ::-webkit-scrollbar-thumb { border-radius: 10px; background: rgb(169,169,169); }
    
    .android-scroll-bar ::-webkit-scrollbar-thumb:window-inactive {background: rgb(128,128,128); }

    【讨论】:

    • Windows 不使用 Webkit 作为渲染引擎。因此,选择器将不会被识别。顺便说一句:您的答案是一个问题,应该作为一个问题发布。 ;-)
    • 好的,我是堆栈溢出的新手,所以我不知道这些事情,请您点击向上按钮,以便我可以提问。你通过点击向下按钮阻止了我
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2023-03-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多