怎么让两个div同步滚动

Question

<div id="preview"></div>
<div id="editor"></div>

有两个DIV，我想在让其中一个滚动条滚动的时候，让另一个滚动条也相应的滚动。
我尝试了以下这样的代码

let preview = document.querySelector('#preview');
let editor = document.querySelector('#editor');
preview.addEventListener('scroll', (e)=> {
  e.stopPropagation();
  editor.scrollTop = preview.scrollTop;
});

editor.addEventListener('scroll', (e)=> {
  e.stopPropagation();
  preview.scrollTop = editor.scrollTop;
});

但是这样的话，用鼠标去拖动滚动条能够达到我想要的效果，但是如果用鼠标中键滑动的话，会相当的卡顿，无法滚动。

Answer 1

A滚动->emit("Bfollow")->B滚动
B滚动->emit("Afollow")->A滚动

Answer 2

滚动条滑动事件触发过于频繁，每次函数涉及到页面重排（layout）重绘（paint），导致页面卡顿。
建议使用采用节流（throttle）方式，处理过于频繁的事件。

function throttle(fn, delay, mustRun) {

    var startTime = +new Date();
    var timeout = null;


    return function () {

        var context = this;
        var args = Array.prototype.slice.call(arguments);
        var curTime = +new Date();
        var later = function() {

            fn.apply(context, args);
        };
        
        clearTimeout(timeout);

        if (curTime - startTime >= mustRun) {
            fn.apply(context, args);
            startTime = curTime;
        } else {
            timeout = setTimeout(later, delay);
        }
    }
}

代码比较糙，可适当修改

Answer 3

代码未测试，理论可行。

//HTML代码
<div id="test_Left" onScroll="moveUp_Left();" ></div>
<div id="test_Right"onScroll="moveUp_Right();"  ></div>

//JS代码
var timer = null;

//左侧DIV的滚动事件
function moveUp_Left()
{
    //先删除右侧DIV的滚动事件，以免自动触发
    $("#test_Right").removeAttr("onScroll");

    //正常设值，同步两个DIV的滚动幅度
    $("#test_Right").scrollTop($("#test_Left").scrollTop());
    
    //取消延迟预约。【重点】鼠标滚动过程中会多次触发本行代码，相当于不停的延迟执行下面的预约
    clearTimeout(timer);

    //延迟恢复（预约）另一个DIV的滚动事件，并将本预约返回给变量[timer]
    timer = setTimeout(function() {
        $("#test_Right").attr("onScroll","moveUp_Right();");
    }, 300 );
}

//右侧DIV的滚动事件（原理同上）
function moveUp_Right()
{
    $("#test_Left").removeAttr("onScroll");
    $("#test_Left").scrollTop($("#test_Right").scrollTop());
    clearTimeout(timer);
    timer = setTimeout(function() {
        $("#test_Left").attr("onScroll","mymoveUp_UI03_Left();");
    }, 300 );
}

Answer 4

我最近写了一个，可以看看
syncScroll