Markodwns ausführliche Erklärung der Idee des synchronen Scrollens mit Titelausrichtung

Vorwort

Ich muss dem Markodwn-Editor, den ich gerade schreibe, eine synchronisierte Scrollfunktion hinzufügen. Ich habe Baidu durchsucht, aber keine gute Idee gefunden. Ich habe selbst eines geschrieben.

Github enthält die fertige Bibliothek und eine intuitivere Demo.

Github

In diesem Artikel geht es hauptsächlich um die Umsetzungsideen.

einführen

Es gibt viele Möglichkeiten, synchronisiertes Scrollen zu implementieren. Die einfache und grobe Methode besteht darin, HTMLElement.scrollTop gleich zu machen und auch die Bildlaufleisten proportional scrollen zu lassen und die Titel mit dem Scrollen auszurichten (das habe ich bei Stackedit gesehen).

Der Hauptinhalt dieses Artikels befasst sich mit der Implementierung der Titelausrichtung und des synchronen Scrollens.

Persönlich bevorzuge ich die Titelausrichtung, da sie benutzerfreundlicher ist als die anderen beiden.

Im Prinzip ist die Titelausrichtung tatsächlich eine verbesserte Version des proportionalen Scrollens. Denn ihr Kern besteht darin, durch Berechnung des Höhenverhältnisses von Bearbeitungsbereich und Vorschaubereich die Scroll-Distanz zu ermitteln.

DEMO

Unten ist das GIF-Bild von DEMO

Beachten Sie das # auf der linken Seite.

Sie können erkennen, dass beim Bewegen der Bildlaufleiste die Bildlaufdistanzen auf der linken und rechten Seite unterschiedlich sind.

Dies ähnelt ein wenig dem proportionalen Scrollen, ist aber ein Unterschied. Der Unterschied besteht darin, dass beim proportionalen Scrollen die Scrolldistanz anhand der gesamten Texthöhe auf beiden Seiten bestimmt wird, während bei der Titelausrichtung die Scrolldistanz anhand der Höhe des Inhalts unter dem Titel bestimmt wird.

Ideen

Das obige Bild ist eine schematische Darstellung:

# Überschrift bedeutet den Titel, Inhalt bedeutet den Inhalt unter dem Titel. Ich nenne Titel + Inhalt ein Fragment.

Ich denke, proportionales Scrollen sollte relativ einfach zu verstehen sein. Dabei wird das Höhenverhältnis des Bearbeitungsbereichs und des Vorschaubereichs berechnet und dann die Scrolldistanz basierend auf diesem Verhältnis berechnet.

Die Titelausrichtung ist präziser. Sie ändert die Höhe des Bearbeitungsbereichs und des Vorschaubereichs auf die Titelhöhe + die Höhe des Inhalts unter dem Titel, also die Höhe des Fragments, und berechnet dann die Scrolldistanz basierend auf der Höhe, die dem aktuellen Fragment entspricht.

Die MD-Höhe und die HTML-Höhe im obigen Diagramm sind die Höhen der Fragmente, die wir benötigen.

Solange wir das Verhältnis dieser beiden Höhen verwenden, können wir offensichtlich die entsprechende Bildlaufdistanz berechnen.

Spezifischer Prozess

Zunächst werden die Titelinformationen des Editier- und Vorschaubereichs benötigt. Die Datenstruktur ist dabei wie folgt. Verwenden Sie stattdessen editFragmentsInfo und preFragmentsInfo

FragmentInfo: {
    pairId, // Die ID, die zum Abgleichen des Titels verwendet wird, der dem Bearbeitungsbereich/Vorschaubereich entspricht
    offsetTop, // Abstand vom oberen Offset height // Höhe von Titel plus Inhalt}

Dann benötigen Sie eine Methode, um den Titelblock oben auf der aktuellen Seite abzurufen. Hier verwenden wir stattdessen getCurrentFragment() .

Als nächstes wird im Scroll-Ereignis von editArea/previewArea eine Nachricht an previewArea/editArea gesendet, um sie darüber zu informieren, dass der Scrollvorgang gleich beginnt.

Führen Sie nach dem Empfang in einem anderen Bereich die folgenden Vorgänge aus. (Nehmen Sie an, dass der aktive Bildlaufbereich der Bearbeitungsbereich ist und der passive Bildlaufbereich der Vorschaubereich, der ein anderer Bereich ist.)

1. Holen Sie sich zunächst den aktuellen Titel oben mit getCurrentHeading() .
2. Ordnen Sie anschließend im Vorschaubereich den entsprechenden Titel zu.
3. Der aus dem Verhältnis von headingInfo.height auf beiden Seiten plus dem Wert von headingInfo.offsetTop berechnete Wert ist der ScrollTop des Vorschaubereichs.
4. An diesem Punkt ist die Synchronisierung abgeschlossen. Dieser Vorgang ist an das Bildlaufereignis des Elements gebunden und wird bei jedem Bildlauf ausgelöst.

Synchronisierungsprobleme

Da das Scrollen eines Elements das Scrollen eines anderen Elements bewirkt, entsteht zwangsläufig eine Endlosschleife. Daher muss beim Scrollen eine Entscheidung getroffen werden, um eine Endlosschleife zu vermeiden.

Dies ist eine einfache Methode zum gegenseitigen Ausschluss, die den gegenseitigen Ausschluss von mehr als zwei Objekten unterstützt.

Zusammenfassen

Oben finden Sie eine ausführliche Erläuterung der vom Herausgeber eingeführten Idee des synchronen Scrollens der Markodwn-Titelausrichtung. Ich hoffe, dass dies für alle hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten!