Scroll con momentum en iOS con -webkit-overflow-scrolling

Si alguna vez han creado un elemento con scroll saben que se usa el desbordamiento para que se pueda activar el scroll y podamos tener como un mini frame dentro de nuestro sitio. El problema de este procedimiento es que como nosotros lo estamos creando en los navegadores de escritorio no sucede ningún problema, pero en los navegadores móviles esto no les gusta mucho, ocasionando que el touch & drag no sirve como debería ser.

El error es en realidad global en cualquier plataforma porque el navegador sólo reconoce como único scroll al de la página y no a los secundarios, lo que hace que el deslizamiento no sea tan fluido. Apple curiosamente solucionó este problema con una de sus propiedades, y puesto que pronto Google dejará de usar Webkit para Chrome es un hecho que esto es sólo para Safari de momento. Entonces, vamos a ver cómo crear un scroll suave en iOS con CSS

El efecto lo que hace es darle el efecto de rebote y aceleración que vemos en las ventanas de Safari, una animación que hace que el fluido sea muy suave, pero que con la propiedad de overflow: scroll no se logra porque en realidad no trata de hacer lo mismo, y eso es una mala experiencia de usuario.

Demo

CSS

Cabe recordar que para crear este efecto de momentum también es necesario agregar el overflow normal para los demás navegadores, De hecho, lo que estaba viendo es que como tal en los navegadores de escritorio el scroll tampoco funciona a la perfección, es mejor que en el de los navegadores pero tiene un ligero retraso que hace que por ejemplo con OS X sirva estupendamente bien, pero en Windows no tanto. Esto es un problema de implementación en los navegadores al no saber bien si se quiere arrastrar o deslizar en estos contenidos scrolleables.

Vía johanbrook