如何实现JavaScript Markdown编辑器在双屏上的同步滚动功能？

本文共计2117个文字，预计阅读时间需要9分钟。

目录 + 前言 + 百分比滚动 + 双屏同时显示占用面积大的元素 + 添加一个索引 + 前言 + 因直接使用 markdown 编辑器 + 技术文章写作，对编写体验非常敏感。我发现了各大社区中的 markdown 编辑器。

目录

• 前言
• 百分比滚动
• 双屏同时渲染占用面积大的元素
• 赋上一个索引
• 踩坑

前言

由于一直在使用 markdown 编辑器写技术文章，所以对于编写体验很敏感。我发现各大社区的 markdown 编辑器基本都有同步滚动功能。只不过有些做得好，有些做得马马虎虎。出于好奇，我就打算自己亲自实现一下这个功能。

思考了一段时间，最后想出来了三种方案：

• 百分比滚动
• 双屏同时渲染占用面积大的元素
• 每一行的元素都赋上一个索引，根据索引来精确同步每一行的滚动高度

百分比滚动

假设现在正在滚动 a 屏，那 a 屏的滚动百分比计算方式为：a 屏的滚动高度 / a 屏的内容总高度，用代码表示a.scrollTop / a.scrollHeight。