두 개의 스크롤 막대를 자바 스크립트로 동기화하는 방법은 무엇입니까?

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;