Explication détaillée des idées de mise en œuvre de défilement synchrone de l'alignement du titre Markodwn

J'ai besoin d'ajouter la fonction de défilement synchrone à l'éditeur MarkODWN que j'écris. Baidu l'a connecté et n'a trouvé aucune meilleure idée. Je viens d'en écrire un moi-même.

GitHub est une bibliothèque bien écrite et une démo plus intuitive.

Github

Cet article parle principalement de l'idée de mise en œuvre.

Il existe de nombreuses façons d'implémenter le défilement synchrone. Faites simplement HTMLElement.scrollTop égal et faites défiler la barre de défilement en proportion et faites défiler avec l'alignement du titre (c'est ce que j'ai vu sur empilEdit).

Le contenu principal de cet article est de savoir comment mettre en œuvre l'alignement des titres et le défilement synchrone.

Personnellement, je préfère l'alignement du titre car cette méthode est plus conviviale que les deux autres.

En principe, l'alignement du titre est en fait une version améliorée de défilement à proportion égale. Parce que leur noyau détermine la distance de défilement en calculant le rapport de hauteur de la zone d'édition et de la zone d'aperçu.

Vous trouverez ci-dessous une photo GIF de la démo

Remarque # À gauche pour synchroniser le défilement.

Vous pouvez voir que lorsque la barre de défilement se déplace, les distances de défilement sur les côtés gauche et droite sont différentes.

Cela ressemble un peu à un défilement à proportion égale, mais ils sont différents. La différence est une proportion égale le défilement détermine la distance de défilement en fonction de la hauteur du texte intégral des deux côtés, et l'alignement du titre détermine la distance de défilement en fonction de la hauteur du contenu sous le titre.

L'image ci-dessus est un diagramme schématique:

# La tête représente le titre, et le contenu représente le contenu sous le titre. J'appelle le contenu Titre + un fragment.

Je pense qu'il est plus facile de comprendre le défilement de proportion égal, qui est de calculer le rapport de hauteur de la zone d'édition et de la zone d'aperçu, puis de calculer la distance de défilement en fonction du rapport.

L'alignement du titre devrait être plus précis. Il remplace la hauteur de la zone d'édition et la zone d'aperçu par la hauteur du titre + la hauteur du contenu sous le titre, c'est-à-dire la hauteur du clip, puis calcule la distance de défilement en fonction de la hauteur correspondante du clip actuel.

La hauteur MD et la hauteur HTML dans le diagramme ci-dessus sont les hauteurs des fragments dont nous avons besoin.

Il est évident que tant que nous pouvons calculer la distance de roulement correspondante en fonction du rapport de ces deux hauteurs.

Premièrement, les informations de titre de la zone d'édition et de la zone d'aperçu sont requises, et la structure des données est la suivante. Utilisez editFragmentsInfo et preFragmentsInfo à la place

 FragmentInfo: {pairID, // id offsetop pour les titres correspondants correspondant à la zone d'édition / zone d'aperçu, // distance de la hauteur du décalage supérieur // title plus hauteur de contenu}

Ensuite, vous avez besoin d'une méthode qui peut obtenir le bloc de titre en haut de la page actuelle et utiliser getCurrentFragment() à la place.

Ensuite, vous devez envoyer un message à la préviewarea / editaria dans l'événement de défilement de l'Edarita / PreviewArea pour informer qu'il est sur le point de commencer à faire défiler.

Après avoir reçu une autre zone, effectuez les opérations suivantes. (Supposons que la zone d'édition défile activement et que la zone d'aperçu fait défiler passivement, c'est-à-dire une autre zone)

1. Tout d'abord, vous devez obtenir le titre actuel en haut et utiliser getCurrentHeading() mentionné ci-dessus pour obtenir.
2. Faites ensuite correspondre le titre correspondant dans la zone d'aperçu.
3. La valeur calculée sur la base du rapport de headingInfo.height des deux côtés, plus la valeur de headingInfo.offsetTop est le défilement dans la zone d'aperçu.
4. Jusqu'à présent, une synchronisation se termine. Ce processus est lié à l'événement de défilement de l'élément, et chaque parchemin déclenchera un tel processus.

Étant donné que le défilement d'un élément provoquera le défilement d'un autre élément, cela formera inévitablement une boucle morte. Par conséquent, vous devez faire des jugements dans des événements roulants pour éviter une boucle morte.

Il s'agit d'une méthode d'exclusion mutuelle simple qui prend en charge l'exclusion mutuelle de plus de deux objets.

Ce qui précède est une explication détaillée des idées de mise en œuvre synchrones de défilement de l'alignement du titre Markodwn qui vous est présenté. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps!