I have successfully implemented scrollable div's on a page designed for tablets running Android 3.2+, BlackBerry Playbook, and iOS5+ (except iPad 1). However, I would like to add scrollbars to improve the user experience. For iOS5, I can use the supported webkit code snippet in my CSS styles to achieve native-like Apple scrollbars:
-webkit-overflow-scrolling: touch;
Is there a similar solution that works on Android and BlackBerry devices? I prefer a CSS/webkit approach but JavaScript is also acceptable as long as it is not a bulky plugin like iScroll. I have tried using the following code, but it causes lagging issues on all platforms:
::-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);
}
Any assistance or suggestions you can provide would be greatly appreciated. Thank you!