Estoy tratando de simular el desplazamiento mantecoso en mac os / ios, a menudo denominado "desplazamiento de inercia" o "desplazamiento de impulso", a medida que avanza por la página.
Todo lo que encontré hasta ahora usa un transform3d para cambiar su contenido y lo manipulan a través de alguna función de alivio js.
El problema con el uso de transform3d es que no puede usar position: sticky o position: fixed en ninguna parte de su aplicación, gracias a esta belleza: Positions fixed no funciona cuando se usa -webkit-transform
Estoy tratando de encontrar una forma menos intrusiva de crear la misma funcionalidad, excepto sin el contenedor que usan todas estas bibliotecas.
Probé muchas cosas, desde jugar con el evento de desplazamiento de ventana existente para emitir uno nuevo con desplazamiento suave, con suerte con los valores de inercia correctos, hasta investigar una forma de hacerlo a través de CSS puro.
¿Alguien sabe si esto es posible?
De hecho, estoy pasando por lo mismo en este momento, es divertido que esta pregunta haya surgido justo cuando estaba buscando una solución.
Lo único que encontré hasta ahora es usar esto: https://github.com/BCJdevelopment/butter.js
Mi elemento de posición fija es la barra de navegación. Se fija en el desplazamiento.
Entonces, lo que hice fue encapsular todo el contenido de mi cuerpo desplazable, después de mi barra de navegación, en un DIV con una ID de "botón".
Al desplazarse, la barra de navegación se vuelve fija pero el resto del contenido se puede desplazar.
<body> <div class="fixed-navigation-bar"> ... </div> <!-- The position fixed element --> <div id="butter"> <!-- The JS targets this and everything within it has smooth scrolling enabled --> <div class="rest-of-website-content"> ... </div> </div> </body>Esto funciona, pero en Chrome el desplazamiento es muy lento y estoy buscando una solución con un mejor rendimiento.
Espero que esto ayude al menos un poco.