怎么让两个div同步滚动

<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;
});

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

阅读 13.4k
4 个回答

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

滚动条滑动事件触发过于频繁,每次函数涉及到页面重排(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);
        }
    }
}

代码比较糙,可适当修改

新手上路,请多包涵

代码未测试,理论可行。

//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 );
}
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题