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

Question

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

这就是我现在的（小部分，其余部分在jsfiddle中），它适用于1格。

$("#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相同，那么我不能再滚动任何东西。 这是因为div 1会触发div 2和div 2触发器回到div 1。 我试图用禁用代码解决这个问题，但它没有帮助。

有人可以帮助我吗？

http://jsfiddle.net/XmYh5/1/

Answer 1

不尊重@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()); 
    }); 
} 

Fiddle

Answer 2

您可以使用一个变量来确定活动的文本框与.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); 
    } 
}); 

您可以检查更新的jsFiddle here。

Answer 3

终于拿到了这个动态的解决方案，更复杂的比我想象的，但我想我明白了：

http://jsfiddle.net/XmYh5/14/

var initialTop = 150, 
    factor = 2; 

    $(".textBox") 
     .addClass('disabled') 
     .scrollTop(initialTop) 
     .on('scroll', function() { 
      var $this = $(this); 

      if(!$this.is('.disabled')) { 
       this.lastOffset = this.lastOffset || initialTop; 

       var offset = $this.scrollTop(), 
        step = (offset - this.lastOffset)/factor; 

       $this.siblings().each(function() { 
        var $this = $(this), 
         offset = $this.scrollTop() - step; 

        $this.scrollTop(offset); 
        this.lastOffset = offset; 
       }); 

       this.lastOffset = offset; 
      } 
     }) 
     .on('mouseenter', function() { 
      $(this).removeClass('disabled').siblings().addClass('disabled'); 
     });