如何使用Javascript同步兩個滾動條？

Question

我有一個<DIV>和一個<TEXTAREA>，問題是該元素（將接收同步）滾動超過預期，而不是與百分比。

到目前爲止，我已經成功地做到這一點：

function syncScroll(from, to) 
 
{ 
 
    var sf = from.scrollHeight - from.clientHeight, 
 
     st = to.scrollHeight - to.clientHeight; 
 

 
    if (sf < 1) { 
 
     return; 
 
    } 
 

 
    var p = (sf/100) * from.scrollTop; 
 

 
    to.scrollTop = (st/100) * p; 
 
} 
 

 

 
window.onload = function() { 
 
    var currentScrollEvt, timer; 
 

 
    var editor = document.querySelector(".editor"); 
 
    var preview = document.querySelector(".preview"); 
 

 
    preview.innerHTML = editor.value; 
 

 
    editor.onscroll = function() { 
 
     if (currentScrollEvt === "preview") { 
 
      return; 
 
     } 
 

 
     clearTimeout(timer); 
 

 
     currentScrollEvt = "editor"; 
 

 
     syncScroll(editor, preview); 
 

 
     timer = setTimeout(function() { 
 
      currentScrollEvt = null; 
 
     }, 200); 
 
    }; 
 

 
    preview.onscroll = function() { 
 
     if (currentScrollEvt === "editor") { 
 
      return; 
 
     } 
 

 
     clearTimeout(timer); 
 

 
     currentScrollEvt = "preview"; 
 

 
     syncScroll(preview, editor); 
 

 
     timer = setTimeout(function() { 
 
      currentScrollEvt = null; 
 
     }, 200); 
 
    }; 
 
};

html, body { 
 
    padding: 0; 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 

 
* { 
 
    box-sizing: content-box; 
 
} 
 

 
body { 
 
    display: flex; 
 
} 
 

 
.editor, .preview { 
 
    flex: 1; 
 
} 
 

 
.preview { 
 
    background-color: #f00; 
 
    overflow: auto; 
 
    float: right; 
 
}

<textarea class="editor"> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
a <br> 
 
</textarea> 
 

 
<div class="preview"></div>

Answer 1

你的百分比計算是錯誤的，試試這個來代替：

var p = from.scrollTop/sf * 100;