实现自己的 markdown 编辑器 —— 同步滚动

同步滚动是 markdown 编辑器一个基本的功能
需求是编辑区滚动时,预览区同步滚动

效果如下:


图片

具体实现如下

$("textarea#mdeditor").on('scroll', function(){
    $preview = $("div#preview");
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    var height = percentage * ($preview.get(0).scrollHeight - $preview.get(0).offsetHeight);
    $preview.scrollTop(height);
});
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,235评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,816评论 4 61
  • 早上,路过十字路口,红灯时协警习惯性拿着小红旗指挥交通,众人都停步等待。 只见一位中年男士开着三轮车载着一男一女两...
    营军口佳宝阅读 4,090评论 0 0
  • 新生儿摄影准备 近几年新生儿摄影已经流行开来,从最早的百天开始到满月,从满月到十多天甚至更早。 拍摄时间 新生儿出...
    留逝时光阅读 2,642评论 4 5
  • 现实强奸了过去,留下了孽种叫回忆 现实总是残酷的,过去总是酸楚的 过去,你还记得多少? 不知道,也不明了! 转眼,...
    吾阅十八阅读 2,444评论 0 2

友情链接更多精彩内容