How to scroll a div inside another div?


Tags: android,css,html5,scroll,cordova

Problem :

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

text-align:center;

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.



Solution :

overflow: scroll 

doesnt work in Android 2.3.x,

you will need to build the scrolling yourself by listening for drag events.

see the iScroll library


    CSS Howto..

    How to create a CSS shade effect with a faded sidebar

    How Polymer Hero Transition works

    How can I make a full width videojs v5 progress bar?

    How to stop css animation in current position on hover?

    CSS Icons are working locally in the app, but are not showing on Heroku?

    How to give menu sub menu options

    how to load css for a div?

    How to make the page layout stay the same after minimized?

    How to use css in extjs to modify the “browse files” button?

    How to change order of divs in HTML code, for 3-column CSS Layout?

    How to programmatically check CSS styles for particular elements? [duplicate]

    CSS Overflow: overlay. Is it deprecated? How can I replace it?

    How to let a div behave like another div?

    How to change Label color in flex Using CSS?

    How to get a 2 column widget area defined in CSS?

    How to make CSS triangles (with borders) compatible across browsers

    Gulp callback - How to tell Gulp to run a task first before another?

    how to avoid the ID name in css file

    How do I keep a grid-type-arrangement of floating div elements centered in their container at various screen widths? [closed]

    Show/hide
  • by jQuery
  • How to make layout with fixed sized column in Liferay?

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    how to set css position absolute in hover state

    how to make the position of div is fixed even though it's empty?

    How do I make CSS hover transitions animate on mouse off AND mouse over, and replicate that in jQuery?

    Bootstrap: Background image z-index to show it above bg color

    How to make one Div's position (not child or parent) completely linked / dependent on another Div's position?

    How do you organize your template structure in CodeIgniter?

    How can I get my input text to move to the left up against the preceding label?

    How to get jQuery UI tabs element panels and set visibility on some of them?