Markodwnによるタイトル配置による同期スクロールのアイデアの詳細な説明

序文

私が作成中の Markodwn エディターに同期スクロール機能を追加する必要があります。Baidu で検索しましたが、良いアイデアが見つかりませんでした。自分でも書きました。

Github には完成したライブラリと、より直感的なデモが含まれています。

ギットハブ

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

導入

同期スクロールを実装する方法は多数あります。単純で大雑把な方法は、 HTMLElement.scrollTopを等しくし、スクロールバーを比例してスクロールさせ、タイトルをスクロールに合わせて揃えることです (これは、stackedit で見たものです)。

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

個人的には、他の 2 つよりもユーザーフレンドリーなので、タイトルの配置を好みます。

原則として、タイトルの配置は実際には比例スクロールの改良版です。編集領域とプレビュー領域の高さの比率を計算してスクロール距離を決定するのが中心だからです。

デモ

以下はDEMOのGIF画像です

左側の # に注意してください。

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

これはプロポーショナルスクロールに少し似ていますが、異なります。違いは、プロポーショナルスクロールでは両側のテキスト全体の高さに基づいてスクロール距離が決定されるのに対し、タイトル配置ではタイトルの下のコンテンツの高さに基づいてスクロール距離が決定されることです。

アイデア

上の図は概略図です。

# 見出しはタイトルを意味し、コンテンツはタイトルの下のコンテンツを意味します。私はタイトル + コンテンツをフラグメントと呼びます。

プロポーショナルスクロールは比較的簡単に理解できると思います。編集領域とプレビュー領域の高さの比率を計算し、その比率に基づいてスクロール距離を計算するというものです。

タイトルの配置がより正確になりました。編集領域とプレビュー領域の高さを、タイトルの高さ + タイトルの下のコンテンツの高さ、つまりフラグメントの高さに変更し、現在のフラグメントに対応する高さに基づいてスクロール距離を計算します。

上の図の md の高さと html の高さは、必要なフラグメントの高さです。

明らかに、これら 2 つの高さの比率を使用する限り、対応するスクロール距離を計算できます。

具体的なプロセス

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

フラグメント情報: {
    pairId, // 編集領域/プレビュー領域に対応するタイトルを一致させるために使用されるID
    offsetTop, // 上部オフセットからの距離 height // タイトルとコンテンツの高さ}

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

次に、editArea/previewArea のスクロールイベントで、スクロールが開始されることを通知するメッセージが previewArea/editArea に送信されます。

別のエリアで受信した後、以下の操作を行ってください。（アクティブなスクロール領域は編集領域、パッシブなスクロール領域は別の領域であるプレビュー領域であると仮定します）

まず、上記のgetCurrentHeading()を使用して、上部の現在のタイトルを取得します。
次に、プレビュー領域で対応するタイトルを一致させます。
両側のheadingInfo.heightの比率に基づいて計算された値とheadingInfo.offsetTopの値を加えた値が、プレビュー領域のscrollTopになります。
この時点で同期は完了です。このプロセスは要素のスクロールイベントにバインドされており、スクロールするたびにこのプロセスがトリガーされます。

同期の問題

1 つの要素をスクロールすると別の要素もスクロールされるため、必然的に無限ループが形成されます。したがって、無限ループを回避するには、スクロールイベントで判断を行う必要があります。

これは、2 つ以上のオブジェクトの排他性をサポートする単純な排他性メソッドです。

要約する

上記は、エディターが導入したMarkodwnタイトル配置の同期スクロールのアイデアの詳細な説明です。皆様のお役に立てれば幸いです。ご質問がある場合は、メッセージを残してください。エディターがすぐに返信します。