Deslizamiento suave de desplazamiento de estilo nativo con aceleración / deceleración en IOS usando overflow-x: desplazamiento; Desplegable div usando CSS

Utilizando un div desplazable

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

DEMO en dispositivos Android, el desplazamiento al deslizar es suave e incluso tiene aceleración y deceleración.

El mismo código en un iPhone, el desplazamiento es rígido. Cuando el usuario suelte, el desplazamiento se detiene inmediatamente.

¿Cómo haces que el iPhone trate el div desplazable como un browser Android con desplazamiento de estilo nativo de aceleración / deceleración suave?

Puede get un desplazamiento de estilo nativo en un elemento HTML con overflow mediante el uso de la siguiente propiedad de CSS propietario:

-webkit-overflow-scrolling: touch;

Tiene algunas advertencias, sin embargo. Dependiendo de lo que esté dentro del elemento, la representación podría estar un poco rota, por lo que debe probarlo y ver si se adapta a sus necesidades particulares. Tampoco estoy seguro de si funciona correctamente cuando especifique overflow-y: hidden . Si no es así, debería poder hacer que funcione jugando con diferentes valores para overflow-x , overflow-y y overflow (el auto no parece funcionar).

Si lo necesita, puede falsificar overflow-y: hidden en su div creando un segundo div nested con el contenido y configurando esa propiedad en él. Pero espero que eso no sea necesario.

La sugerencia de Marco Aurélio es en realidad la mejor solución. Funciona mejor si configura overflow-y: scroll y agregue -webkit-overflow-scrolling: touch el elemento. Obtendrás una sensación de desplazamiento nativa

Ok, esto es lo que funciona para mi:

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