使用其編輯器進行並排降價預覽滾動

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>