如何同步两个滚动条与Javascript纯

How sync two scrollbars with Javascript pure?

本文关键字：滚动条 Javascript 两个 何同步 同步      更新时间：2023-09-26

我有一个<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>

你的百分比计算错误，试试这个:

    var p = from.scrollTop / sf * 100;
相关文章：