Markodwn 標題對齊的同步滾動

前言

須要給正在寫的Markodwn編輯器加上同步滾動的功能，百度了一通，沒找到比較好的思路。就本身寫了一個。

Github上是寫好的庫，和更直觀的Demo。 Github

這篇文章主要講的是實現的思路。

介紹

同步滾動的實現方式有不少種。簡單粗暴的就直接讓HTMLElement.scrollTop相等，還有就是讓滾動條等比例滾動，還有標題對齊的滾動（這個是我在stackedit上看到的）。

這篇文章主要的內容是標題對齊同步滾動的實現方式。

我的來說比較喜歡標題對齊，由於這種方式相對於另外兩個對用戶更友好。

從原理上來說標題對齊其實是等比例滾動的改良版。由於他們的核心都是經過計算編輯區和預覽區的高度比值決定滾動的距離。

DEMO

下面是DEMO的GIF圖

注意左邊的 # 同步滾動 同步滾動。

能夠看到隨着滾動條的移動，左右兩邊滾動的距離是不一樣的。

這個看起來有點像等比例滾動，可是他們是不同的，區別在等比例滾動根據兩邊的全文高度決定滾動距離，標題對齊方式根據標題下內容高度決定滾動距離。

思路

上圖是一張示意圖：

# heading表示標題，content表示標題下面的內容。我把標題+內容稱爲片斷（fragment）。

等比例滾動我想應該比較好理解，就是經過計算編輯區和預覽區的高度比值，而後根據比值再計算滾動距離。

而標題對齊要更加精確一些，它把編輯區和預覽區的高度換成了標題高度+標題下內容的高度即片斷的高度，而後根據當前的片斷對應的高度計算滾動距離。

上面的示意圖中的md height和html height就是咱們須要的片斷的高度。 很明顯只要咱們根據這兩個高度的比值就能夠計算出相對應滾動的距離。

具體過程

1. 首先須要編輯區和預覽區的標題信息，數據結構以下。這裏用editFragmentsInfo和preFragmentsInfo代替

FragmentInfo: {
    pairId,         // 於編輯區/預覽區相對應的標題匹配用的id
    offsetTop,      // 距離頂部偏移的距離
    height          // 標題加上內容的高度
}
複製代碼

2. 而後須要可以獲取當前頁面頂部的標題塊的方法，這裏用getCurrentFragment()代替
3. 接下來要在 編輯區（editArea）/預覽區（previewArea） 的滾動事件中向 預覽區（previewArea）/編輯區（editArea） 發送消息通知它要開始滾動了。
4. 在另外一區域接收到以後，進行如下操做。（假設主動滾動的是編輯區，被動滾動的是預覽區即另外一區域）
   1. 先要拿到當前在頂部的標題，用上面提到的getCurrentHeading()獲取。
   2. 而後要在預覽區中匹配到對應的標題。
   3. 根據兩邊headingInfo.height的比值計算出的數值再加上headingInfo.offsetTop的值就是預覽區的scrollTop。
5. 到此爲止，一次同步就結束了。這一過程是綁定在元素的滾動事件上的，每次滾動都會觸發一次這樣的過程。

同步問題

由於一個元素的滾動會致使另外一個元素滾動，這一定會造成死循環。因此在滾動事件中必定要進行判斷，避免死循環。

這是簡單的互斥方法，支持兩個以上對象的互斥 互斥鎖