Smooth scrolling scroll your own style 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, scroll on scroll is smooth and even has acceleration and deceleration.

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

How to make iPhone handle a scrollable div like an Android browser, with smooth scrolling in acceleration / deceleration style?

Answer 1

You can scroll the HTML-style uppercase line using overflow using the following proprietary CSS property:

-webkit-overflow-scrolling: touch;

He has some warnings. Depending on what is inside the element, the rendering may be slightly broken, so you should check it and see if it suits your specific needs. I'm also not sure if it works correctly when you specify overflow-y: hidden . If this is not the case, you can make it work by playing 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 content and setting this property on it. But I hope this is not necessary.

Answer 2

An offer 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. You get the feel of a native scroll

Answer 3

Ok, this is what works for me:

 body, html { overflow-x:hidden; -webkit-overflow-scrolling: touch; }