同期スクロール実装の実装のアイデアの詳細な説明マルコドウンタイトルアライメント

執筆しているMarkodwnエディターに同期スクロール機能を追加する必要があります。 Baiduはそれをつなぎ、より良いアイデアを見つけませんでした。自分で書いただけです。

Githubは、よく書かれたライブラリであり、より直感的なデモです。

github

この記事では、主に実装のアイデアについて説明しています。

同期スクロールを実装する方法はたくさんあります。 HTMLElement.scrollTopを等しくし、巻物を比例してスクロールし、タイトルアライメントでスクロールします（これはStackeditで見たものです）。

この記事の主な内容は、タイトルのアラインメントと同期スクロールを実装する方法です。

個人的には、この方法は他の2つよりも使いやすいため、タイトルアラインメントを好みます。

原則として、タイトルアラインメントは、実際には等しい割合のスクロールの改善されたバージョンです。編集領域とプレビュー領域の高さ比を計算することにより、それらのコアがスクロール距離を決定するためです。

以下は、デモのGIF写真です

左側にある注＃は、スクロールを同期させます。

スクロールバーが移動するにつれて、左側と右側のスクロール距離が異なることがわかります。

これは、等しい割合のスクロールのように見えますが、それらは異なります。違いは、等しい割合のスクロールが、両側の全文の高さに基づいてスクロール距離を決定することであり、タイトルアライメントは、タイトルのコンテンツの高さに基づいてスクロール距離を決定します。

上の写真は概略図です：

＃見出しはタイトルを表し、コンテンツはタイトル以下のコンテンツを表します。タイトル +コンテンツをフラグメントと呼びます。

編集領域とプレビュー領域の高さ比を計算し、比率に基づいてスクロール距離を計算するのは、平等な割合のスクロールを理解する方が簡単だと思います。

タイトルアライメントはより正確でなければなりません。編集領域の高さとプレビュー領域を、タイトルの高さとタイトルの下のコンテンツの高さ、つまりクリップの高さに置き換え、現在のクリップの対応する高さに基づいてスクロール距離を計算します。

上記の図のMDの高さとHTMLの高さは、必要な断片の高さです。

これらの2つの高さの比に基づいて、対応する回転距離を計算できる限り、明らかです。

まず、編集領域とプレビュー領域のタイトル情報が必要であり、データ構造は次のとおりです。代わりに、 editFragmentsInfoとpreFragmentsInfoを使用します

fragmentInfo：{pairid、//編集領域/プレビュー領域に対応する一致するタイトルのためのid offsettop、//トップオフセットの高さ//タイトルプラスコンテンツの高さ}

次に、現在のページの上部にタイトルブロックを取得し、代わりにgetCurrentFragment()を使用できるメソッドが必要です。

次に、editarea/previeweieaのスクロールイベントでPreviewarea/editareaにメッセージを送信して、スクロールを開始しようとしていることを通知する必要があります。

別のエリアを受け取った後、次の操作を実行します。 （編集領域が積極的にスクロールしており、プレビュー領域が受動的にスクロールしていると仮定します。つまり、別の領域です）

1. まず、現在のタイトルを上部に取得し、上記のgetCurrentHeading()を使用して取得する必要があります。
2. 次に、プレビュー領域の対応するタイトルを一致させます。
3. 両側のheadingInfo.heightの比率に基づいて計算された値と、 headingInfo.offsetTopの値は、プレビュー領域のスクロールトップです。
4. これまでのところ、1つの同期は終了します。このプロセスは、要素のスクロールイベントにバインドされており、各スクロールはそのようなプロセスをトリガーします。

1つの要素をスクロールすると、別の要素のスクロールが発生するため、これは必然的にデッドループを形成します。したがって、死んだループを避けるために、ローリングイベントで判断を下す必要があります。

これは、2つ以上のオブジェクトの相互除外をサポートする単純な相互除外方法です。

上記は、あなたに紹介されたMarkoDWNタイトルのアラインメントの同期スクロール実装のアイデアの詳細な説明です。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者は時間内に返信します！