I try to build a simple app with cordova which target android
I just want to have a scrollable div but
- if the content is smaller than the div's height, the scrollbar is always visible
- if the content is bigger than the div's height, the scrollbar never appear, even if I scroll : the scroll is possible but no scrollbar position indication
My layout is simple :
<body>
<div id='views'>
<div class='view'>
Lorem ipsum ...
</div>
</div>
</body>
Css is simple too :
#views {
position : absolute;
top:0; right:0; bottom:0; left:0;
}
.view {
position : absolute;
top:0; right:0; bottom:0; left:0;
overflow-x : hidden;
overflow-y : scroll;
-webkit-overflow-scrolling : touch;
overflow-scrolling : touch;
}
Then I use command : cordova run android
note :
- I use cordova version 3.3.1-0.3.1
- test on Nexus 7 updated (android kitkat)
- with last android API : 19
Thanks for your help
edit : I just try with iOs simulator (iOS 6.1), the scrollbars are visibles when I scroll ...
[updated] Thanks to help me. Here is is the correct code to have scrollbars on android
[updated 2] It's not totally ok, try this, the whole window scroll, not only the .view content
HTML
<body>
<div id='views'>
<div class='view'>
Lorem ipsum ...
</div>
</div>
<div id='menu-bt'></div>
</body>
CSS
.view {
position:absolute;
top:0; right:0; bottom:0; left:0;
overflow:visible;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
}
#menu-bt {
position:absolute;
right:40px; bottom:40px;
width:50px; height:50px;
background-color:green;
}
Then, add this line in file /plateforms/android/src/io/cordova/myProject/MyProject.java
super.appView.setVerticalScrollBarEnabled(true);