美文网首页
实现自己的 markdown 编辑器 —— 同步滚动

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

作者: 冬瓜1992 | 来源:发表于2018-03-31 19:30 被阅读0次

    同步滚动是 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);
    });
    

    相关文章

      网友评论

          本文标题:实现自己的 markdown 编辑器 —— 同步滚动

          本文链接:https://www.haomeiwen.com/subject/nxtjcftx.html