Markodwn 标题对齐的同步滚动

gekylin 发布于2019-08-23 17:11 / 2413人阅读

摘要：简单粗暴的就直接让相等，还有就是让滚动条等比例滚动，还有标题对齐的滚动这个是我在上看到的。这篇文章主要的内容是标题对齐同步滚动的实现方式。从原理上来讲标题对齐实际上是等比例滚动的改良版。下面是的图注意左边的同步滚动同步滚动。

前言

需要给正在写的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。

到此为止，一次同步就结束了。这一过程是绑定在元素的滚动事件上的，每次滚动都会触发一次这样的过程。

同步问题

因为一个元素的滚动会导致另一个元素滚动，这必定会形成死循环。所以在滚动事件中一定要进行判断，避免死循环。

这是简单的互斥方法，支持两个以上对象的互斥
互斥锁

云服务器 GPU云服务器 html滚动标题 Markodwn 底部对齐的代码 linux数据的对齐

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103953.html

移动端样式小技巧

摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机样式显示效果不一致造成的。五左右宽度自适应第四个小技巧结尾，图中的布局实际上是分左右两块的，依照的需求，文案是要左对齐，数字是要右对齐的。平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Andr...

iOS122 2019-08-29 11:05 评论0 收藏0
移动端样式小技巧

摘要：平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机样式显示效果不一致造成的。五左右宽度自适应第四个小技巧结尾，图中的布局实际上是分左右两块的，依照的需求，文案是要左对齐，数字是要右对齐的。平时在移动端开发拼页面的过程中总会遇到一些问题，主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧，希望对看官有所帮助！本文只针对两大手机阵营 Andr...

lufficc 2019-08-20 10:14 评论0 收藏0
Python开发【前端篇】HTML

摘要：标签行内元素，表示一行中的一小段内容，没有具体的语义。表示当前文件所在目录下的上一级目录，比如表示当前目录下的上一级目录下的文件夹中的的图片。标签表示列表的整体。1.html概述和基本结构 html概述 HTML是 HyperText Mark-up Language 的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成...

番茄西红柿 2019-04-23 13:27 评论0 收藏0