javascript - Comportamiento de desplazamiento extraño en los últimos navegadores incluidos en Blink(como Chrome, Opera)

angular google-chrome

Question

Recientemente he estado trabajando en la construcción de una biblioteca de componentes de vista de árbol para Angular, como ngx-tree .

Problema

Poco después de descubrir cómo implementar una función de desplazamiento virtual para esta biblioteca para el rendimiento con un gran conjunto de datos, y lograr que se ejecute correctamente en Firefox, estoy atrapado por un extraño comportamiento de desplazamiento en los navegadores incluidos en Blink (como Chromium, Chrome , Opera).

Enlace de demostración

Aquí está la demostración plunkr - https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 vea la Actualización n. ° 1 a continuación

Situación

• En Firefox, Edge e IE 11, mi biblioteca con función de desplazamiento virtual funciona con expectativa con desplazamiento suave.
• Sin embargo, en Chrome y Opera, cuando me desplazo a algunas posiciones dentro de la vista de árbol, la posición de la barra de desplazamiento (que es la propiedad scrollTop del área de desplazamiento) salta hacia arriba y hacia abajo, provoca una vista de árbol parpadeante y descompone el virtual -función de desplazamiento.

versión detallada del navegador

• Chrome - 59.0.3071.115
• Firefox - 54.0
• Borde - 40.15063.0.0

otros navegadores

En China, hay algunos navegadores descascarados derivados del proyecto Chromium (como 360se, navegador QQ, navegador Sogou, navegador UC) con una versión anterior de V8 y parpadeo . Y no tienen ese extraño comportamiento de desplazamiento.

Alguna suposición

¿Es causado por alguna optimización en la implementación de desplazamiento (como desplazamiento suave) por parte del equipo de Chromium?

Espero conseguir algunas guías !!! (≧ ﹏ ≦)

Actualización n. ° 1

Actualización de enlace de demostración con registro de eventos: https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

Hay que probar el desplazamiento antes de abrir devtool para ver los registros.

Tengo que explicar un poco más cómo funciona el desplazamiento virtual y qué está causando el parpadeo.

Primero, vea el diseño de Desplazamiento virtual .

Un punto clave del desplazamiento virtual es: creamos un área de desplazamiento falsa del mismo tamaño que esa área sin desplazamiento virtual instrumentado. Entonces, en una situación óptima, la posición de la barra de desplazamiento del área de desplazamiento no debería cambiar hasta que algunos eventos esperados desencadenen sus cambios. Para el evento de desplazamiento, actualizamos la vista para cada cuadro de animación.

Dentro de un área de desplazamiento de altura fija, asumimos la verdad de que la propiedad scrollTop no cambiará con un gran porcentaje , si simulamos correctamente la altura de esos elementos no entregados (podría haber un poco de desviación para la precisión del cálculo ) dentro de una animación marco.

Sin embargo, según mis resultados observados, los navegadores de la serie blink parecen realizar una estrategia diferente para actualizar el scrollTop del elemento desplazable. Su momento para actualizar el scrollTop es diferente al de los navegadores de la serie sin parpadeo. Eso es todo lo que he descubierto hasta ahora.

Gifs de muestra

Aquí hice algunos gifs para mostrar la salida de Chrome, Firefox y Edge.

Cromo

Firefox

Borde

Answer 1

Estás sacando la biblioteca de la virtual-scroll-demo-branch branch:

''ngx-tree'': ''https://rawgit.com/e-cloud/ngx-tree/virtual-scroll-demo-branch/src/lib'',

Esa rama es de 105 commits detrás del master. Establece incorrectamente margin-top en uno de los elementos internos. Esto se soluciona en las versiones más recientes .

Editar: El desarrollador realmente hizo referencia a esta pregunta de desbordamiento de pila en su mensaje de confirmación .