如何在JavaScript / jQuery中同步两个不同div的滚动条？

Question

我的index.html页面中有两个div，我通过选择div并将内容注入其中来加载每个div中的不同内容（使用jQuery）。所以我获得了两个div，每个div都有一个水平滚动条来显示其内容。我尝试做的是同步两个滚动条，如果两个div只能有一个滚动条。

提前感谢您的回答，如果我在英语中犯了错误，我会感到抱歉，因为这不是我的母语。

Answer 1

您可以使用jQuery的scrollLeft（）函数获取当前滚动位置，如下所述： http://api.jquery.com/scrollleft/

您只需设置两个相互触发的滚动侦听器（请务必将其放入文档的预备功能中！）：

var div1 = $('#scrollDiv-1');
var div2 = $('#scrollDiv-2');

div1.scroll(function() {
    div2.scrollLeft($(this).scrollLeft());
});

div2.scroll(function() {
    div1.scrollLeft($(this).scrollLeft());
});

您可以使用setTimeout或setInterval延长时间，以节省资源。

Answer 2

实际上我试图使用这段代码：

$("#div1").scroll(function () { 
    	$("#div2").scrollLeft($("#div1").scrollLeft());
    });
$("#div2").scroll(function () { 
    	$("#div1").scrollLeft($("#div2").scrollLeft());
    });

用于一个带有两个div的简单示例，但我无法将此代码添加到我的index.html，抱歉我无法显示代码，因为它是保密的，但我只有两个div，我把内容放在一个jQuery函数，所以我不明白为什么上面的代码在一个案例中工作而在另一个案例中不起作用。