简体   繁体   English

移动浏览器中可滚动div中的滚动条跨平台

[英]Scrollbars in scrollable div's in mobile browsers cross-platform

I'm using scrollable div's (with the CSS element overflow:scroll) to build me a page for tablets running Android 3.2+, BlackBerry Playbook and iOS5+ (iPad 1 not supported). 我正在使用可滚动div(带有CSS元素overflow:scroll)为运行Android 3.2 +,BlackBerry Playbook和iOS5 +(不支持iPad 1)的平板电脑建立页面。
I got this working but I would like scrollbars. 我得到了这个工作,但我想要滚动条。 For iOS5 there is this supported webkit code snipped which I add to the CSS styles. 对于iOS5,我删除了此受支持的Webkit代码,并将其添加到CSS样式中。 This makes really nice 'native' like apple scrollbars: 这使像苹果滚动条的“ native”非常好:

-webkit-overflow-scrolling: touch;

Is there something similar which works on Android and the BlackBerry? 在Android和BlackBerry上是否有类似的功能? A CSS/webkit solution would be best but JavaScript is fine too as long as it's not a large plugin as iScroll or similar. CSS / webkit解决方案是最好的,但JavaScript也可以,只要它不是iScroll或类似产品的大插件即可。
What I tested too but doesn't work as it 'lags' really bad on all platforms is the following: 我也测试了以下内容,但由于在所有平台上均“落后”于实际情况而无法正常工作:

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

Thanks for your help! 谢谢你的帮助!

I have not yet found a cross platform CSS solution for this yet. 我尚未为此找到跨平台CSS解决方案。 I have how ever used a lightweight js solution touch scroll https://github.com/neave/touch-scroll 我曾经使用过轻量级js解决方案触摸滚动https://github.com/neave/touch-scroll

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM