web-dev-qa-db-fra.com

Comportement de défilement étrange dans les derniers navigateurs Blink (comme Chrome, Opera)

Récemment, j'ai travaillé sur la construction d'une bibliothèque de composants arborescents pour Angular, comme ngx-tree .

Problème

Peu de temps après, j'ai compris comment implémenter une fonction de défilement virtuel pour cette bibliothèque pour des performances avec un grand ensemble de données, et je l'ai fait fonctionner correctement dans Firefox, Je suis piégé par un comportement de défilement étrange dans Blink - navigateurs inclus (comme Chromium, Chrome, Opera).

Lien de démonstration

Voici la démo plunkr - https://embed.plnkr.co/xMpmK5EBC46tDKpYFpw8 voir la mise à jour # 1 ci-dessous

Situation

  • Dans Firefox, Edge et IE 11, ma bibliothèque avec fonction de défilement virtuel fonctionne dans l'attente d'un défilement fluide.
  • Cependant, dans Chrome et Opera, lorsque je fais défiler vers certaines positions dans l'arborescence, la position de la barre de défilement (qui est la propriété scrollTop de la zone de défilement)) saute et vers le bas, provoque un scintillement arborescence et décompose la fonction de défilement virtuel.

version détaillée du navigateur

  • Chrome - 59.0.3071.115
  • Firefox - 54.0
  • Edge - 40.15063.0.0

d'autres navigateurs

En Chine, il existe des navigateurs décortiqués dérivés du projet Chromium (comme 360se, navigateur QQ, navigateur Sogou, navigateur UC) avec ancienne version de V8 et clignote . Et ils n'ont pas ce comportement de défilement étrange.

Quelques hypothèses

Est-ce dû à une optimisation de l'implémentation du défilement (comme un défilement fluide) par l'équipe Chromium?

J'espère avoir des guides !!! (≧ ﹏ ≦)

Mise à jour # 1

Mise à jour du lien de démonstration avec le journal des événements: https://embed.plnkr.co/GpQBZsguhZZOQWWbZnqI/

Il faut tester le défilement avant d'ouvrir devtool pour voir les logs

Je dois expliquer un peu plus comment fonctionne le défilement virtuel et ce qui cause le scintillement.

Tout d'abord, consultez le conception de Virtual Scrolling .

Un point clé du défilement virtuel est ， nous créons une fausse zone de défilement de la même taille que cette zone sans défilement virtuel instrumenté. Ainsi, dans une situation optimale, la position de la barre de défilement de la zone de défilement ne devrait pas changer jusqu'à ce que certains événements attendus déclenchent ses modifications. Pour les événements de défilement, nous mettons à jour la vue pour chaque image d'animation.

Dans une zone de défilement à hauteur fixe, nous supposons que la propriété scrollTop ne changera pas avec un pourcentage élevé , si nous simulons les éléments non rendus ' correctement (il pourrait y avoir un peu d'écart pour la précision du calcul ) dans un cadre d'animation.

Cependant, sur la base de mes résultats observés, les navigateurs de la série blink semblent exécuter une stratégie différente pour mettre à jour le scrollTop de l'élément scrollable. Son timing pour mettre à jour le scrollTop est différent de celui des navigateurs sans clignotement. C'est tout ce que j'ai compris jusqu'à présent.

Exemples de gifs

Ici, j'ai fait quelques gifs pour montrer la sortie de Chrome, Firefox et Edge.

Chrome

Chrome gif

Firefox

Firefox gif

Bord

Edge gif

javascriptangulargoogle-chromescrolltreeview
58
e-cloud

Vous extrayez la bibliothèque du virtual-scroll-demo-branch branche:

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

Cette branche a 105 engagements derrière le maître. Il définit incorrectement margin-top sur l'un des éléments intérieurs. C'est corrigé dans les versions plus récentes .

Edit: Le développeur a en fait référencé cette question de débordement de pile dans leur message de validation .

2
Zenexer