執筆しているMarkodwnエディターに同期スクロール機能を追加する必要があります。 Baiduはそれをつなぎ、より良いアイデアを見つけませんでした。自分で書いただけです。
Githubは、よく書かれたライブラリであり、より直感的なデモです。
github
この記事では、主に実装のアイデアについて説明しています。
導入同期スクロールを実装する方法はたくさんあります。 HTMLElement.scrollTopを等しくし、巻物を比例してスクロールし、タイトルアライメントでスクロールします(これはStackeditで見たものです)。
この記事の主な内容は、タイトルのアラインメントと同期スクロールを実装する方法です。
個人的には、この方法は他の2つよりも使いやすいため、タイトルアラインメントを好みます。
原則として、タイトルアラインメントは、実際には等しい割合のスクロールの改善されたバージョンです。編集領域とプレビュー領域の高さ比を計算することにより、それらのコアがスクロール距離を決定するためです。
デモ以下は、デモのGIF写真です
左側にある注#は、スクロールを同期させます。
スクロールバーが移動するにつれて、左側と右側のスクロール距離が異なることがわかります。
これは、等しい割合のスクロールのように見えますが、それらは異なります。違いは、等しい割合のスクロールが、両側の全文の高さに基づいてスクロール距離を決定することであり、タイトルアライメントは、タイトルのコンテンツの高さに基づいてスクロール距離を決定します。
アイデア上の写真は概略図です:
#見出しはタイトルを表し、コンテンツはタイトル以下のコンテンツを表します。タイトル +コンテンツをフラグメントと呼びます。
編集領域とプレビュー領域の高さ比を計算し、比率に基づいてスクロール距離を計算するのは、平等な割合のスクロールを理解する方が簡単だと思います。
タイトルアライメントはより正確でなければなりません。編集領域の高さとプレビュー領域を、タイトルの高さとタイトルの下のコンテンツの高さ、つまりクリップの高さに置き換え、現在のクリップの対応する高さに基づいてスクロール距離を計算します。
上記の図のMDの高さとHTMLの高さは、必要な断片の高さです。
これらの2つの高さの比に基づいて、対応する回転距離を計算できる限り、明らかです。
特定のプロセスまず、編集領域とプレビュー領域のタイトル情報が必要であり、データ構造は次のとおりです。代わりに、 editFragmentsInfoとpreFragmentsInfoを使用します
fragmentInfo:{pairid、//編集領域/プレビュー領域に対応する一致するタイトルのためのid offsettop、//トップオフセットの高さ//タイトルプラスコンテンツの高さ}次に、現在のページの上部にタイトルブロックを取得し、代わりにgetCurrentFragment()を使用できるメソッドが必要です。
次に、editarea/previeweieaのスクロールイベントでPreviewarea/editareaにメッセージを送信して、スクロールを開始しようとしていることを通知する必要があります。
別のエリアを受け取った後、次の操作を実行します。 (編集領域が積極的にスクロールしており、プレビュー領域が受動的にスクロールしていると仮定します。つまり、別の領域です)
getCurrentHeading()を使用して取得する必要があります。headingInfo.heightの比率に基づいて計算された値と、 headingInfo.offsetTopの値は、プレビュー領域のスクロールトップです。1つの要素をスクロールすると、別の要素のスクロールが発生するため、これは必然的にデッドループを形成します。したがって、死んだループを避けるために、ローリングイベントで判断を下す必要があります。
これは、2つ以上のオブジェクトの相互除外をサポートする単純な相互除外方法です。
要約します上記は、あなたに紹介されたMarkoDWNタイトルのアラインメントの同期スクロール実装のアイデアの詳細な説明です。それがあなたに役立つことを願っています。ご不明な点がございましたら、メッセージを残してください。編集者は時間内に返信します!