CODEWITHSUNDEEP
androidcssscroll
hannebaumsaway
hannebaumsaway

Reputation: 2734

Overflow scroll not working on Android phone

I cannot get overflow: scroll to work on my LG Optimus Elite.

The site functions properly when I load it up on my desktop (Chrome), but I can't scroll within a div on my LG even though its overflow is set to scroll.

I'd love to provide code/examples here, but it's proprietary and shouldn't really be necessary for this.

Is there some other attribute I have to assign for touchscreen scrolling within an absolutely positioned div?

Thanks, sorry again for the vagueness.

Upvotes: 1

Views: 2957

Answers (2)

user2024529
user2024529

Reputation:

The LG Optimus Elite by default runs Android 2.3, whose browser does not support the css overflow property. So the above code will indeed not work on your device.

You could use JS libraries to overcome this problem for devices with Android < 3.0, such as iScroll, FTScroller, Overthrow ... However they come at a cost both in performance (JS polyfill) and in the danger of not having a "native" feeling scrolling on your device (what is known as the uncanny valley).

Upvotes: 1

user2597840
user2597840

Reputation: 1

You are welcome.

The overflow:scroll works fine in in my ICS. Tested on the stock browser, Dolphin, Chrome and Firefox. Don't know about Gingerbread. Note that there are no scroll bars (except in Chrome), and you scroll by drag the content using the touch screen, a very good design.

Below is the page used in the test:

<!DOCTYPE html>
<html>
<head>
<style>
div.container {
    position:relative;
}
div.overflow_scroll {
    position:absolute;
    top:5px;
    left:150px;
    overflow: scroll;
    width: 110px;
    height: 110px;
    background-color: lime
}
div.overflow_hidden {
    overflow: hidden;
    width: 110px;
    height: 110px;
    background-color: blue;
}
</style>
</head>

<body>
<div class="container">
    <div class="overflow_scroll">
        <p>overflow:scroll</p>
        An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph.         
    </div>
</div>
<p>overflow:hidden</p>
<div class="overflow_hidden">An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. An example of a long paragraph. 
</div>
</body>
</html>

Upvotes: 0

Related Questions