Detaillierte Erläuterung der synchronen Scrolling -Implementierungsideen der Markodwn -Titelausrichtung

Ich muss die synchrone Scrolling -Funktion zum Markodwn -Editor hinzufügen, den ich schreibe. Baidu hat es verbunden und keine bessere Idee gefunden. Ich habe gerade selbst einen geschrieben.

Github ist eine gut geschriebene Bibliothek und eine intuitivere Demo.

Github

In diesem Artikel geht es hauptsächlich um die Idee der Implementierung.

Es gibt viele Möglichkeiten, synchrones Scrollen zu implementieren. Machen Sie einfach HTMLElement.scrollTop .

Der Hauptinhalt dieses Artikels ist die Implementierung der Titelausrichtung und der synchronen Scrollen.

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

Grundsätzlich ist die Titelausrichtung tatsächlich eine verbesserte Version von gleichem Verhältnis. Weil ihr Kern die Bildlaufdistanz durch Berechnung des Höhenverhältnisses des Bearbeitungsbereichs und des Vorschaltbereichs bestimmt.

Unten ist ein GIF -Bild der Demo

Hinweis # links, um das Scrollen zu synchronisieren.

Sie können sehen, dass sich die Bildlaufabstände auf der linken und rechten Seite unterscheiden, wenn sich die Bildlaufleiste bewegt.

Dies sieht ein bisschen wie gleicher Anteil aus, aber sie sind unterschiedlich. Die Differenz ist der gleiche Anteil des Schriftrolls bestimmt die Bildlaufentfernung basierend auf der vollständigen Texthöhe beider Seiten, und die Title -Ausrichtung bestimmt die Bildlaufdistanz basierend auf der Höhe des Inhalts unter dem Titel.

Das obige Bild ist ein schematisches Diagramm:

# Überschrift repräsentiert den Titel und der Inhalt repräsentiert den Inhalt unter dem Titel. Ich nenne den Titel + Inhalt ein Fragment.

Ich denke, es ist einfacher, das gleiche Anteil des Bildlaufs zu verstehen, bei dem das Höhenverhältnis des Bearbeitungsbereichs und der Vorschauderfläche berechnet wird und dann den Bildlaufabstand basierend auf dem Verhältnis berechnet wird.

Die Titelausrichtung sollte präziser sein. Es ersetzt die Höhe des Bearbeitungsbereichs und die Vorschauerfläche durch die Titelhöhe + die Höhe des Inhalts unter dem Titel, dh die Höhe des Clips, und berechnet dann den Bildlaufabstand basierend auf der entsprechenden Höhe des aktuellen Clips.

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

Es ist offensichtlich, dass wir den entsprechenden Rollabstand basierend auf dem Verhältnis dieser beiden Höhen berechnen können.

Zunächst sind die Titelinformationen des Bearbeitungsbereichs und des Vorschaufels erforderlich, und die Datenstruktur lautet wie folgt. Verwenden Sie stattdessen editFragmentsInfo und preFragmentsInfo

 FragmentInfo: {PAGEID, // ID Offsettop für übereinstimmende Titel, die dem Bearbeitungsbereich/Vorschauderbereich entsprechen, // Entfernung von der oberen Offsethöhe // Title Plus Inhaltshöhe}}

Dann benötigen Sie eine Methode, mit der der Titelblock oben auf der aktuellen Seite abgerufen und stattdessen getCurrentFragment() verwendet werden kann.

Als nächstes müssen Sie eine Nachricht an die PreviewArea/EDARSAEA im Scroll -Ereignis der Editara/Previewarea senden, um darüber zu informieren, dass es kurz vor dem Scrolling beginnt.

Führen Sie nach Erhalt eines anderen Bereichs die folgenden Vorgänge aus. (Nehmen wir an, dass der Bearbeitungsbereich aktiv scrollen und der Vorschaufelbereich passiv scrollen, dh ein weiterer Bereich)

1. Zunächst müssen Sie den aktuellen Titel oben erhalten und getCurrentHeading() verwenden, um zu erhalten.
2. Stimmen Sie dann den entsprechenden Titel im Vorschaufelbereich ab.
3. Der Wert headingInfo.offsetTop der auf der Basis des Verhältnisses von headingInfo.height berechnet wurde.
4. Bisher endet eine Synchronisation. Dieser Vorgang ist an das Bildlaufereignis des Elements gebunden, und jede Schriftrolle löst einen solchen Vorgang aus.

Da das Scrollen eines Elements das Scrollen eines anderen Elements verursacht, wird dies unweigerlich eine tote Schleife bilden. Daher müssen Sie bei rollenden Ereignissen Urteile fällen, um eine tote Schleife zu vermeiden.

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

Das obige ist eine detaillierte Erläuterung der synchronen Scrolling -Implementierungsideen von Markodwn -Titelausrichtung, die Ihnen vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht. Der Herausgeber wird Ihnen rechtzeitig antworten!