0
我有一個<DIV>
和一個<TEXTAREA>
,問題是該元素(將接收同步)滾動超過預期,而不是與百分比。如何使用Javascript同步兩個滾動條?
到目前爲止,我已經成功地做到這一點:
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>
做工精細,非常感謝! :D(2分鐘接受,限制從計算器) –