Overflow Auto Doesn't Work in Android Browser

Overflow: auto; not working Android 4.2 Browser

I'm afraid it's not overflow:auto; that's not working in Android 4.2 Browser, but calc(100% - 71px). Unfortunatelly, there's no proper workaround for it, other than specifying a hard-coded max-height or height before the calc() rule.

Example:

.navigation__scroll {
   height: 90%;
   height: calc(100% - 71px);
   overflow-y: auto;
   -webkit-overflow-scrolling: touch;
}

Best practice is to hard-code values to height based on popular mobiles sizes.

Css overflow:scroll does not work on mobile

add this css code to your container with overflow scroll.

-webkit-overflow-scrolling: touch;

Below android 2.3.4 overflow:auto not working

Given in this answer

Overflow auto doesn't work in android browser

Also check this

Android native browser doesn't update height on overflow auto when adding elements

OK I managed to fix this by forcing the view to repaint whenever I altered the DOM

$('<style></style>').appendTo($(document.body)).remove();

A horrible horrible fix, but it works...

The Android browser is the new IE6.

Overflow:hidden not working on mobile browser

Try adding following line in your html

<meta name="viewport" content="width=device-width, height=device-height">

and test on your phone. Maybe this should help.

Scroll not working on Android Chrome only

By scroll do you mean dragging the page with your finger on mobile?

You've set -webkit-user-drag: none; as an inline style for body, which might be the cause.

It's a Webkit-specific property:

CSS property: -webkit-user-drag

Description

Specifies that an entire element should be draggable instead of its contents.

Syntax

-webkit-user-drag: auto | element | none;

Values

• auto The default dragging behavior is used.

• element The entire element is draggable instead of its contents.

• none The element cannot be dragged at all.

It's supported by Chrome 1-17 and Safari 3-5.1: http://www.browsersupport.net/CSS/-webkit-user-drag

---

Related Topics