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 align the content to center of page using css

    AJAX Call returns JSON, how to render properly formatted data

    How do you find the largest font size that won't break a given text?

    How to get @media to take precedence over normal styling

    How to import packages within my Aurelia application

    How to properly use CSS borders to visualize a value chain?

    How do I add background color to just the width of centred text?

    How do i cover the image on navbar as well?

    How do I get CSS table columns to line up?

    How to apply default CSS styling to all HTML pages

    How to hide a class on specific page using css

    How to use css to style xhtml markup made only of divs like a table [closed]

    how to get kendo ui mobile style silver

    How do I do the CSS for this?

    How to create such (see image below) effect using pure HTML JS and CSS?

    Text is too close to scroller. How to create a little bit space between scroller and text?

    How to display only the
      that has a selected
    • in it, including all of the
    • s in that parent ul, not just the selected ones?

    How can I force a list item to display on one line with CSS?

    How to set HTML table cell to inherit its size?

    With Wordpress, how do I link to an image to use as a background in my style.css file?

    How to indicate there is more text to scroll?

    How to color specific word in a container using CSS

    How to animate 2 parallel lines in order to form an X on click using CSS and JQuery

    Is this how CSS LESS and SimpLESS work? [closed]

    How to use custom CSS with my Sharepoint WebPart?

    how to show text in a button with css

    How to enlarge and tint photo with pure CSS and jQuery [closed]

    How to add gradient to font face (CSS)?

    How to indent a data table with CSS? [closed]

    how to force horizontal scrolling in an HTML list using CSS?