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?

Solution 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.

Solution 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

Comments

[Gavin]

You are awesome. I had no idea this existed.

[Matstar]

Thank you! Another caveat: if you're trying to always show scrollbars in WebKit with stackoverflow.com/questions/7855590/…, this hides them again. Found a question about that here: stackoverflow.com/questions/28871556/…

[Dave Wood]

Another caveat appears to be that the user losses the ability to tap the status bar to jump to the top of the page.

[Linh Dam]

It's weird that MDN doesn't encourage this CSS (Do not use it on production sites facing the Web) but it works!

[MilMike]

this is not working for me. at least doesn't work on chrome (mobile or desktop) dev tools say "unknown property name"

[Curtis]

For me this doesn't work half the time. If you hit the top of the page then quickly scroll down it doesn't scroll at all, you just see white coming up from the bottom as if you hit the bottom of a web page then it goes away.