YankNote是我写的一款面向程序员的笔记应用。这里我会写一些关于YankNote的文章YankNote实现从源代码到预览的单向同步滚动。研究了一些同步滚动方案，大致可以分为以下三种。行号匹配YankNote最初采用的就是这种方案，简单明了，前提是渲染的Dom节点需要包含行号信息。监听编辑器可见区域的变化/滚动事件，获取最上面的行号。用行号找到行号对应的Dom元素，调用Dom元素的scrollIntoView方法。这种解决方案的优点是它更准确。太好了，不够光滑。等比例滚动的解决方法是直接根据编辑器的滚动高度和可见区域的滚动高度按比例设置滚动条位置，不考虑行号匹配。这种方案的优点是不需要计算行号，适合textarea作为编辑器的场景，滚动比较流畅。缺点是滚动不是很精准，尤其是有图片的时候。综合解决方案是根据标题做比例滚动。nuggets的Markdown编辑器是bytes的Bytemd编辑器。每次编辑器滚动且标题到达顶部时，始终确保标题元素齐平。也就是说，两个标题之间的滚动是比例滚动。优点是滚动很流畅，也兼顾了一部分滚动精度，只能精确到标题。该算法用于行号匹配和比例组合Markdown-itDemo。基于行号匹配：如果可以找到该行号对应的Dom元素，则直接将对应的Dom元素滚动到可见区域的顶部。如果找不到该行号对应的Dom元素，则获取该行号的上一个Dom元素和下一个Dom元素。直接根据行号偏移做等比例滚动。该方案针对多行源代码生成了比较高的元素，比如栅栏、代码块，效果较好。单行元素生成图片等更高元素效果还是差了点（比直接行号匹配好）。因为YankNote里面有很多这样的场景（人鱼图、思维导图、HTML小工具等等），我个人觉得滚动的流畅度不是那么重要，所以最终采用了这个方案。进一步在使用SublimeMerge的过程中，我发现它的冲突解决界面和同步滚动更符合我的预期。我觉得这种交互可以再研究一下，看看能不能作为另一种同时滚动Markdown编辑和预览的方法。参考markdown编辑预览窗口同步算法-少年小白-博客园markdown-it.github.io/index.jsatmasterbytemd/editor.svelteatmain如果对YankNote感兴趣，想使用或参与投稿，可以去Github了解更多。本文由《YankNote——一款给程序员的Markdown笔记应用》撰写
