Markodwn 问题对齐的同步转动实现思绪详解

Github上是写好的库，和更直观的Demo。

Github

这篇文章首要讲的是实现的思绪。

先容

同步转动的实现方法有许多种。简朴粗暴的就直接让 HTMLElement.scrollTop 相称，尚有就是让转动条等比例转动，尚有问题对齐的转动（这个是我在 stackedit 上看到的）。

这篇文章首要的内容是问题对齐同步转动的实现方法。

小我私人来讲较量喜好问题对齐，由于这种方法相对付其它两个对用户更友爱。

从道理上来讲问题对齐现实上是等比例转动的改善版。由于他们的焦点都是通过计较编辑区和预览区的高度比值抉择转动的间隔。

DEMO

下面是DEMO的GIF图

留意左边的 # 同步转动 同步转动 。

可以看到跟着转动条的移动，阁下双方转动的间隔是差异的。

这个看起来有点像等比例转动，可是他们是纷歧样的，区别在等比例转动按照双方的 全文高度 抉择转动间隔，问题对齐方法按照 问题下内容高度 抉择转动间隔。

思绪

上图是一张表示图：

# heading 暗示问题， content 暗示问题下面的内容。我把 问题+内容 称为片断（fragment）。

等比例转动我想应该较量好领略，就是通过计较编辑区和预览区的高度比值，然后按照比值再计较转动间隔。

而问题对齐要越发准确一些，它把编辑区和预览区的高度换成了 问题高度+问题下内容的高度 即 片断 的高度，然后按照当前的片断对应的高度计较转动间隔。

上面的表示图中的 md height 和 html height 就是我们必要的 片断的高度 。

很明明只要我们按照这两个高度的比值就可以计较出相对应转动的间隔。

详细进程
 

起首必要编辑区和预览区的问题信息，数据布局如下。这里用 editFragmentsInfo 和 preFragmentsInfo 取代

FragmentInfo: { pairId, // 于编辑区/预览区相对应的问题匹配用的id offsetTop, // 间隔顶部偏移的间隔 height // 问题加上内容的高度 }

然后必要可以或许获取当前页面顶部的问题块的要领，这里用 getCurrentFragment() 取代 
 

接下来要在 编辑区（editArea）/预览区（previewArea） 的转动变乱中向 预览区（previewArea）/编辑区（editArea） 发送动静关照它要开始转动了。

在另一地区吸取到之后，举办以下操纵。（假设主动转动的是编辑区，被动转动的是预览区即 另一地区 ）

先要拿到当前在顶部的问题，用上面提到的 getCurrentHeading() 获取。

然后要在预览区中匹配到对应的问题。

按照双方 headingInfo.height 的比值计较出的数值再加上 headingInfo.offsetTop 的值就是预览区的 scrollTop 。

到此为止，一次同步就竣事了。这一进程是绑定在元素的转动变乱上的，每次转动城市触发一次这样的进程。

同步题目

由于一个元素的转动会导致另一个元素转动，这一定会形成死轮回。以是在转动变乱中必然要举办判定，停止死轮回。

这是简朴的互斥要领，支持两个以上工具的互斥。
 

总结

以上所述是小编给各人先容的Markodwn 问题对齐的同步转动实现思绪详解，但愿对各人有所辅佐，假如各人有任何疑问接待给我留言，小编会实时回覆各人的！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!