Javascript 使用滚动条滚动其他滚动条

我有3个带滚动条的div。 如果我在div 1中滚动，我想在相反方向滚动div 2和div 3。 滚动的距离应为div 1距离的一半

这就是我现在所拥有的（小部分，rest在JSFIDLE中），它适用于1div

$("#textBox1").scroll(function () {
        console.log("scroll 1");
        var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
        var half_offset = offset/2.0;

        disable1 = true;

        if(disable2 == false) {
            $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
        }
        if(disable3 == false) {
            $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
        }    
        disable1 = false;


    });

但是，如果我尝试为其他2个div获得相同的结果，那么我将无法再滚动任何内容。 这是因为div1会触发div2，而div2会触发回div1。 我试图用禁用代码来修复这个问题，但没有任何帮助

有人能帮我吗

---

您可以使用变量来确定带有

.mousedown（）

的活动文本框，并在其处于活动状态时执行此操作

var activeScroll = '';

$("#textBox1").on('mousedown focus mouseenter', function () {
    activeScroll = 'scroll1';
}).scroll(function () {
    if (activeScroll == 'scroll1') {
        console.log("scroll 1");
        var offset = $("#textBox1").scrollTop() - scrollPosTBox1;
        var half_offset = offset / 2.0;

        $("#textBox2").scrollTop(scrollPosTBox2 - half_offset);
        $("#textBox3").scrollTop(scrollPosTBox3 - half_offset);
    }
});

---

您可以查看您的更新版本。

最终得到了一个动态解决方案，比我想象的要复杂，但我想我得到了：

---

对@EmreErkan和@Simon的努力没有不敬。这是一个没有点击的版本

var $boxes = $("#textBox1,#textBox2,#textBox3"),
    active;

$boxes.scrollTop(150);

// set initial scrollTop values
updateScrollPos();

// bind mouseenter: 
// 1) find which panel is active 
// 2) update scrollTop values

$boxes.mouseenter(function () {
    active = this.id;
    updateScrollPos();
});

// bind scroll for all boxes
$boxes.scroll(function (e) {

    $this = $(this);

    // check to see if we are dealing with the active box
    // if true then set scrolltop of other boxes relative to the active box
    if(this.id == active){

        var $others = $boxes.not($this),
            offset = $this.scrollTop()-$this.data("scroll"),
            half_offset = offset / 2;

        $others.each(function(){
            $this = $(this);
            $this.scrollTop($this.data("scroll") - half_offset);
        });
    }

});

// utility function: 
// assign scrollTop values element's data attributes (data-scroll)

function updateScrollPos() {
    $boxes.each(function(){
        $this = $(this);
        $this.data("scroll",$this.scrollTop());
    });
}

---

您好，谢谢，看起来不错，但无法进入：

if（activeScroll='scroll1'）{

我在大括号后添加了

console.log（“active！1”）；

但我从未在控制台中看到消息。是的，由于某些原因，activeScroll保持为空。您能用jsFiddle显示代码吗？我将

console.log（“scroll 1”）放在

在大括号后，仅显示“滚动1”当您滚动

textbox1

此处时：检查第一行1。例如，第15行始终为“是”，因为它不在if语句中。在每次滚动时，文本框的每个滚动事件都将触发，但由于if语句，只有活动的文本框的滚动功能才能工作。如果您移动

控制台.log（）

调用if语句内部，您将看到它仅在滚动第一个文本框时才会记录。您所说的“现在做”是什么意思？@Simon My scroll事件到处都是，添加了对活动框的检查。

var $boxes = $("#textBox1,#textBox2,#textBox3"),
    active;

$boxes.scrollTop(150);

// set initial scrollTop values
updateScrollPos();

// bind mouseenter: 
// 1) find which panel is active 
// 2) update scrollTop values

$boxes.mouseenter(function () {
    active = this.id;
    updateScrollPos();
});

// bind scroll for all boxes
$boxes.scroll(function (e) {

    $this = $(this);

    // check to see if we are dealing with the active box
    // if true then set scrolltop of other boxes relative to the active box
    if(this.id == active){

        var $others = $boxes.not($this),
            offset = $this.scrollTop()-$this.data("scroll"),
            half_offset = offset / 2;

        $others.each(function(){
            $this = $(this);
            $this.scrollTop($this.data("scroll") - half_offset);
        });
    }

});

// utility function: 
// assign scrollTop values element's data attributes (data-scroll)

function updateScrollPos() {
    $boxes.each(function(){
        $this = $(this);
        $this.data("scroll",$this.scrollTop());
    });
}