使用其编辑器进行并排降价预览滚动

Question

我在左侧有一个Markdown编辑器，在右侧有一个HTML预览。

如何使预览滚动到与编辑器相同的位置。

Answer 1

您链接的示例只是将滚动条对齐到相同的高度，它似乎没有对元素进行任何智能匹配。

所以一个好的开始就是对齐滚动条。

Answer 2

的Remarkable library使用复杂的滚动同步的演示：https://github.com/jonschlinkert/remarkable/blob/dev/demo/assets/index.js#L213

Answer 3

试试这个：

var $elements = $('textarea'); 

var sync = function(e){ 
    var $other = $elements.not(this).off('scroll'), other = $other.get(0); 
    var percentage = this.scrollTop/(this.scrollHeight - this.offsetHeight); 
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight); 
    setTimeout(function(){ $other.on('scroll', sync); },10); 
} 

$elements.on('scroll', sync); 

小提琴：http://jsfiddle.net/b75KZ/5/

虽然，我不知道这是否会是一个textarea你想在右边，也许div显示呈现的HTML？

如果是这样，只需将html中的元素和jQuery中的选择器更改为var $elements = $('textarea, div#html');，并确保为div设置了id属性集。另外，如果您在页面上有多个textarea s，并且希望更具体，只需将选择器更改为var $elements = $('textarea#markdown, div#html');并相应地更新标记即可。

<textarea id="markdown">...</textarea> 
<div id="html">...</div>