How to scroll a div inside another div?
In my Cordova 2.5.0 app for android, I have created a lightbox like popup, which is a
<div>. Now i want to scroll the inner div, which I'm not able to. It has following structure
___________#lightbox_____________ | | | _______#header_________ | | | | | | _______________________ | | | | _____#wantToScroll_____ | | | | | | | | | | | | | | | | | | | but doesn't | | | | | | | _______________________ |
Css for #lightbox
width:100%; height:100%; overflow:hidden; float:left; position:absolute; top:0; left:0; display:none; background:rgba(0,0,0,.7);
css for #header
css for #wantToScroll
font-size:large; color:black; padding:1% 3%; line-height:1.5 em; max-height:70%; position:relative; overflow:auto; -webkit-overflow-scrolling: touch;
How to do this? Is there any issue that phonegap conflicts with native scrollview or something? As far as I have reached to the conclusion, it is not. The problem is with the positioning. But I tried all combinations of relative, fixed and absolute pos.
Kindly do not suggest to use any kind of external plugin like sencha or iscroll. I think there has to be a solution without these.
doesnt work in Android 2.3.x,
you will need to build the scrolling yourself by listening for drag events.
see the iScroll library