Question

I have a problem with my app. I’m working with Cordova 1.8.1 on Android 2.3.3.
I’m trying to use scroll in a div. But it doesn’t works. But works with Android 4.0.3.
I add that this div is empty but with ajax i update and add more content.
This is my code:

<div id="openDataContent" style="width: 100%;height:70%; margin:5px 0 0 0; overflow: scroll;-webkit-overflow-scrolling: touch;  box-shadow: 2px 0px 2px #1b698e;border:solid;"></div>

Answer 1

The overflow property is not working properly in Android devices before Android 3.0. But it is solved from the Android 3.0 or later.

I also had this issue while I was developing an application.

This issue was solved by using a button and animating the element’s margin-top property so that it is changed to negative value, therefore creating a scroll effect.

First add a Up and Down buttons in the HTML page

<a href="#" onclick="ScrollDiv('UP')" style="text-decoration:none;"><img id="ScrollUp" src="images/UpButton.png" style="position:absolute;float:right;top:30%;right:5px;z-index:100;" /></a>
<a href="#" onclick="ScrollDiv('DOWN')" style="text-decoration:none;"><img id="ScrollDown" src="images/DownButton.png" style="position:absolute; float:right;top:80%;right:5px;z-index:100;" /></a>

Than add the function ScrollDiv() in javasctipt

function ScrollDiv(where)
{
    if(where != '' && where == 'UP')
    {
        $("#showAnim").css("margin-top", '-=100');
    }
    else
    {
        $("#showAnim").css("margin-top", '+=100');
    }
}

In this code, by clicking the UP button will change the margin-top to negative value therefore creating the scroll effect. Same goes for Down Button.

You can also add conditions for enabling or disabling the Up and Down Button if the limit of scrolling is reached.