Smooth native style swipe scrolling with acceleration/deceleration on IOS using overflow-x: scroll; scrollable div using CSS

Question

Using a scrollable div

.scrollable-div{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

DEMO on Android devices the scrolling on swipe is smooth and even has acceleration & deceleration.

The same code on an iPhone, the scrolling is stiff. When the user releases touch the scrolling stops immediately.

How do you make the iPhone treat the scrollable div like an Android browser with smooth acceleration/deceleration native style scrolling?

Answer 1

You can get native-style scrolling on an HTML element with overflow by using the following proprietary CSS property:

-webkit-overflow-scrolling: touch;

It has some caveats, though. Depending on what's inside the element, rendering might be slightly broken, so you should test it and see if it suits your particular needs. I'm also not sure if it works properly when you specify overflow-y: hidden. If it doesn't, you should be able to get it to work by playing around with different values for overflow-x, overflow-y and overflow (auto doesn't seem to work).

If you need to, you can fake overflow-y: hidden on your div by creating a second nested div with the content and setting that property on it. But I hope that's not necessary.

Answer 2

The suggestion from Marco Aurélio is actually the best solution. It works best if you set overflow-y: scroll AND adding -webkit-overflow-scrolling: touch to the element as well. You'll get a native-like scroll feeling