关于vue.js:Yank-Note-系列-04-编辑和预览同步滚动方案

Yank Note 是我编写的一款面向程序员的笔记利用。这里我将会写下一些对于 Yank Note 的文章

Yank Note 实现了从源码到预览的单向同步滚动。钻研了一些同步滚动计划，大体分为上面三种。

行号匹配

Yank Note 最后就是采纳的这种计划，简略间接，前提是渲染出的 Dom 节点须要蕴含行号信息。

1. 监听编辑器可视区域变动 / 滚动事件，获取顶部的行号
2. 拿着行号找到对应行号的 Dom 元素
3. 调用 Dom 元素的 scrollIntoView 办法

这个计划长处是比拟精准，毛病是行号匹配不到时候滚动不太好，也不够平滑。

等比例滚动

这个计划就是不论行号匹配，间接依照编辑器滚动高度和可视区域滚动高度来等比例设定滚动条地位。

这个计划长处是不必计算行号，适宜 textarea 做编辑器的场景，滚动也比拟平滑。毛病则是滚动不太精准，特地是有图片的时候。

综合计划

依据题目做等比例滚动

掘金的 Markdown 编辑器是应用的字节的 Bytemd 编辑器。

每次编辑器滚动，题目到顶时候，始终保障题目元素是平齐的。也就是两个题目之间的滚动做等比例滚动。

长处是滚动十分平滑，也兼顾了一部分滚动精确性，只能准确到题目。

行号匹配和等比例联合

Markdown-it Demo 是用的这种算法。

在 行号匹配 的根底上：

• 如果能找到对应行号的 Dom 元素，间接将对应 Dom 元素滚动到可视区域顶部。
• 如果不能找到对应行号的 Dom 元素，那就获取该行号的上一个 Dom 元素 和下一个 Dom 元素。间接依据行号偏移做等比例滚动。

这个计划对很多行源码生成一个比拟高的元素，如围栏和代码块等，成果较好。对单行元素生成较高的元素如图片则成果还是差一点（比间接行号匹配强）。

因为 Yank Note 里这种场景比拟多（Mermaid 图形、脑图、HTML 小工具等），滚动平滑度我集体感觉不是那么重要，所以最终采纳了这个计划。

进一步

在应用 Sublime Merge 的过程中，我发现它的解决抵触界面，同步滚动做得比拟合乎我的预期。这种交互我感觉能够再钻研一下，看能不能作为 Markdown 编辑和预览同步滚动的另一种办法。

参考

1. markdown 编辑与预览窗口同步算法 – 少年小白 – 博客园
2. markdown-it.github.io/index.js at master
3. bytemd/editor.svelte at main

如果你对 Yank Note 感兴趣，想应用或者参加奉献，能够到 Github 理解更多。

本文由「Yank Note – 一款面向程序员的 Markdown 笔记利用」撰写