Explicación detallada de las ideas de implementación de desplazamiento sincrónico de la alineación del título de Markodwn

Necesito agregar la función de desplazamiento sincrónico al editor Markodwn que estoy escribiendo. Baidu lo ha conectado y no encontró una mejor idea. Acabo de escribir uno yo mismo.

Github es una biblioteca bien escrita y una demostración más intuitiva.

Github

Este artículo habla principalmente sobre la idea de implementación.

Hay muchas formas de implementar el desplazamiento sincrónico. Simplemente haga HTMLElement.scrollTop igual, y desplácese la barra de desplazamiento en proporción y desplácese con la alineación del título (esto es lo que vi en Stackedit).

El contenido principal de este artículo es cómo implementar la alineación de títulos y el desplazamiento sincrónico.

Personalmente, prefiero la alineación de títulos porque este método es más fácil de usar que los otros dos.

En principio, la alineación del título es en realidad una versión mejorada de desplazamiento de igual proporción. Porque su núcleo determina la distancia de desplazamiento al calcular la relación de altura del área de edición y el área de vista previa.

A continuación se muestra una imagen gif de demostración

Nota # a la izquierda para sincronizar el desplazamiento.

Puede ver que a medida que la barra de desplazamiento se mueve, las distancias de desplazamiento en los lados izquierdo y derecho son diferentes.

Esto parece un desplazamiento de igual proporción, pero son diferentes. La diferencia es la misma proporción El desplazamiento determina la distancia de desplazamiento en función de la altura del texto completo de ambos lados, y la alineación del título determina la distancia de desplazamiento en función de la altura del contenido bajo el título.

La imagen de arriba es un diagrama esquemático:

# El encabezado representa el título, y el contenido representa el contenido debajo del título. Llamo al título + contenido un fragmento.

Creo que es más fácil entender el desplazamiento de igual proporción, que es calcular la relación de altura del área de edición y el área de vista previa, y luego calcular la distancia de desplazamiento en función de la relación.

La alineación del título debería ser más precisa. Reemplaza la altura del área de edición y el área de vista previa con la altura del título + la altura del contenido debajo del título, es decir, la altura del clip, y luego calcula la distancia de desplazamiento en función de la altura correspondiente del clip actual.

La altura de MD y la altura HTML en el diagrama anterior son las alturas de los fragmentos que necesitamos.

Es obvio que siempre que podamos calcular la distancia de rodamiento correspondiente en función de la relación de estas dos alturas.

Primero, se requiere la información del título del área de edición y el área de vista previa, y la estructura de datos es la siguiente. Use editFragmentsInfo y preFragmentsInfo en su lugar

 FragmentInfo: {emparid, // id offsettop para coincidir títulos correspondientes al área de edición/área de vista previa, // distancia desde la altura de compensación superior // Título más altura de contenido}

Luego necesita un método que pueda obtener el bloque de título en la parte superior de la página actual y use getCurrentFragment() en su lugar.

A continuación, debe enviar un mensaje al PreviewArea/Editarea en el evento de desplazamiento del Editarea/PreviewArea para informarle que está a punto de comenzar a desplazarse.

Después de recibir otra área, realice las siguientes operaciones. (Suponga que el área de edición se desplaza activamente y que el área de vista previa se desplaza pasivamente, es decir, otra área)

1. Primero, debe obtener el título actual en la parte superior y usar getCurrentHeading() mencionado anteriormente para obtener.
2. Luego coincida con el título correspondiente en el área de vista previa.
3. El valor calculado en función de la relación de headingInfo.height headingInfo.offsetTop
4. Hasta ahora, una sincronización termina. Este proceso está vinculado al evento de desplazamiento del elemento, y cada pergamino activará dicho proceso.

Debido a que el desplazamiento de un elemento causará el desplazamiento de otro elemento, esto inevitablemente formará un bucle muerto. Por lo tanto, debe emitir juicios en eventos ondulantes para evitar un bucle muerto.

Este es un método de exclusión mutua simple que admite la exclusión mutua de más de dos objetos.

Lo anterior es una explicación detallada de las ideas de implementación de desplazamiento sincrónico de la alineación del título de Markodwn presentada a usted. Espero que te sea útil. Si tiene alguna pregunta, déjame un mensaje. ¡El editor le responderá a tiempo!