CODEWITHSUNDEEP
androidcordova
Corallino
Corallino

Reputation: 109

Div Scroll with android 2.3.3

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>

Upvotes: 0

Views: 4605

Answers (2)

falko
falko

Reputation: 1457

Look at the http://www.seabreezecomputers.com/tips/scroll-div.htm

Remember to set height or weight on element in px and overflow/owerflow-x/overflow-y=scroll

Upvotes: 0

Rishi
Rishi

Reputation: 330

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.

Upvotes: 3

Related Questions