javascript - 怎么让两个div同步滚动
阿神
阿神 2017-04-11 11:35:02
[JavaScript讨论组]

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

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

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

阿神
阿神

闭关修行中......

全部回复(2)
迷茫

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

代码比较糙,可适当修改

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号