El uso del desplazamiento de locomotora provoca algunos parpadeos al desplazarse hacia arriba . Los elementos de las secciones superiores aparecen en la ventana gráfica con un retraso pequeño pero notable (tal vez 0,1 segundos). Vi muchas demostraciones, pero casi todos estos sitios web tienen el mismo problema. Por ejemplo, la demostración oficial : mire la sección "04. Elementos fijos": la imagen parpadea cuando se desplaza hacia arriba.
¿Es inevitable cuando se usa el desplazamiento suave de Locomotion?
PS Chrome 97.0 en Windows
ACTUALIZACIÓN 1 Ese problema aparece solo en los navegadores basados en Chrome desde la versión 94 debido a la implementación de su desplazamiento virtual.
He encontrado una solución temporal:
.has-scroll-smooth {position: fixed; top: 0; right: 0; bottom: 0; left: 0;}Pero esto rompe el diseño si usa una posición fija para algunos elementos en la página.
Estaba enfrentando el mismo problema hasta ahora, pero comencé a jugar con coordenadas matrix3D y finalmente lo solucioné.
Simplemente busque las coordenadas de matrix3D en locomotora-sroll.min.js y reemplácelas con el valor a continuación.
Agradéceme después.
key: "transform", value: function(t, e, i, s) { var n; if (s) { var o = q(t), r = F(ox, e, s), l = F(oy, i, s); n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(r, ",").concat(l, ",0,1)"); } else n = "matrix3d(1,0,1,0,0,1,0,0,0,0,1,0,".concat(e, ",").concat(i, ",0,1)"); console.log(n); t.style.webkitTransform = n, t.style.msTransform = n, t.style.transform = n }ahórrese la molestia y use el método nativo
y crea tu propia función como:
// scroll to element smoothly via native built in function on said element // just change x13 to the id of your element or use the scrollIntoView Function on an element which you can get from various document.querySelector or others. document.getElementById('x13').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});