前言

需要給正在寫的Markodwn編輯器加上同步滾動(dòng)的功能，百度了一通，沒(méi)找到比較好的思路。就自己寫了一個(gè)。

Github上是寫好的庫(kù)，和更直觀的Demo。

Github

這篇文章主要講的是實(shí)現(xiàn)的思路。

介紹

同步滾動(dòng)的實(shí)現(xiàn)方式有很多種。簡(jiǎn)單粗暴的就直接讓 HTMLElement.scrollTop 相等，還有就是讓滾動(dòng)條等比例滾動(dòng)，還有標(biāo)題對(duì)齊的滾動(dòng)（這個(gè)是我在 stackedit 上看到的）。

這篇文章主要的內(nèi)容是標(biāo)題對(duì)齊同步滾動(dòng)的實(shí)現(xiàn)方式。

個(gè)人來(lái)講比較喜歡標(biāo)題對(duì)齊，因?yàn)檫@種方式相對(duì)于另外兩個(gè)對(duì)用戶更友好。

從原理上來(lái)講標(biāo)題對(duì)齊實(shí)際上是等比例滾動(dòng)的改良版。因?yàn)樗麄兊暮诵亩际峭ㄟ^(guò)計(jì)算編輯區(qū)和預(yù)覽區(qū)的高度比值決定滾動(dòng)的距離。

DEMO

下面是DEMO的GIF圖

注意左邊的 # 同步滾動(dòng) 同步滾動(dòng) 。

可以看到隨著滾動(dòng)條的移動(dòng)，左右兩邊滾動(dòng)的距離是不同的。

這個(gè)看起來(lái)有點(diǎn)像等比例滾動(dòng)，但是他們是不一樣的，區(qū)別在等比例滾動(dòng)根據(jù)兩邊的 全文高度 決定滾動(dòng)距離，標(biāo)題對(duì)齊方式根據(jù) 標(biāo)題下內(nèi)容高度 決定滾動(dòng)距離。

思路

上圖是一張示意圖：

# heading 表示標(biāo)題， content 表示標(biāo)題下面的內(nèi)容。我把 標(biāo)題+內(nèi)容 稱為片段（fragment）。

等比例滾動(dòng)我想應(yīng)該比較好理解，就是通過(guò)計(jì)算編輯區(qū)和預(yù)覽區(qū)的高度比值，然后根據(jù)比值再計(jì)算滾動(dòng)距離。

而標(biāo)題對(duì)齊要更加精確一些，它把編輯區(qū)和預(yù)覽區(qū)的高度換成了 標(biāo)題高度+標(biāo)題下內(nèi)容的高度 即 片段 的高度，然后根據(jù)當(dāng)前的片段對(duì)應(yīng)的高度計(jì)算滾動(dòng)距離。

上面的示意圖中的 md height 和 html height 就是我們需要的 片段的高度 。

很明顯只要我們根據(jù)這兩個(gè)高度的比值就可以計(jì)算出相對(duì)應(yīng)滾動(dòng)的距離。

具體過(guò)程
 

首先需要編輯區(qū)和預(yù)覽區(qū)的標(biāo)題信息，數(shù)據(jù)結(jié)構(gòu)如下。這里用 editFragmentsInfo 和 preFragmentsInfo 代替

FragmentInfo: {
    pairId,         // 于編輯區(qū)/預(yù)覽區(qū)相對(duì)應(yīng)的標(biāo)題匹配用的id
    offsetTop,      // 距離頂部偏移的距離
    height          // 標(biāo)題加上內(nèi)容的高度
}

然后需要能夠獲取當(dāng)前頁(yè)面頂部的標(biāo)題塊的方法，這里用 getCurrentFragment() 代替 
 

接下來(lái)要在 編輯區(qū)（editArea）/預(yù)覽區(qū)（previewArea） 的滾動(dòng)事件中向 預(yù)覽區(qū)（previewArea）/編輯區(qū)（editArea） 發(fā)送消息通知它要開始滾動(dòng)了。

在另一區(qū)域接收到之后，進(jìn)行以下操作。（假設(shè)主動(dòng)滾動(dòng)的是編輯區(qū)，被動(dòng)滾動(dòng)的是預(yù)覽區(qū)即 另一區(qū)域 ）

1. 先要拿到當(dāng)前在頂部的標(biāo)題，用上面提到的 getCurrentHeading() 獲取。
2. 然后要在預(yù)覽區(qū)中匹配到對(duì)應(yīng)的標(biāo)題。
3. 根據(jù)兩邊 headingInfo.height 的比值計(jì)算出的數(shù)值再加上 headingInfo.offsetTop 的值就是預(yù)覽區(qū)的 scrollTop 。
4. 到此為止，一次同步就結(jié)束了。這一過(guò)程是綁定在元素的滾動(dòng)事件上的，每次滾動(dòng)都會(huì)觸發(fā)一次這樣的過(guò)程。

同步問(wèn)題

因?yàn)橐粋€(gè)元素的滾動(dòng)會(huì)導(dǎo)致另一個(gè)元素滾動(dòng)，這必定會(huì)形成死循環(huán)。所以在滾動(dòng)事件中一定要進(jìn)行判斷，避免死循環(huán)。

這是簡(jiǎn)單的互斥方法，支持兩個(gè)以上對(duì)象的互斥。
 

總結(jié)

以上所述是小編給大家介紹的Markodwn 標(biāo)題對(duì)齊的同步滾動(dòng)實(shí)現(xiàn)思路詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！

最新評(píng)論