使用滾動條滾動其他滾動條

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