如何将Markdown编辑器双屏同步滚动功能改写为长尾词？

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

目录+前言+百分比分栏滚动+双屏同时渲染占用面积大的元素+添加一个索引+踩坑+前言+由于直接使用markdown+编辑器写技术文章，所以对编写体验非常敏感。我发现各大社区的markdown+编辑器“

目录

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

前言

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

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

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

百分比滚动

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