прокрутки другие полосы прокрутки с полосой прокрутки

Question

У меня есть 3 divs с полосами прокрутки. Если я прокручиваю в div 1, я хочу прокрутить div 2 и 3 в противоположном направлении. Прокрутка по расстоянию должна быть на половину расстояния от div 1.

Это то, что у меня есть (небольшая часть, покой в ​​jsfiddle), которая работает на 1 div.

$("#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; 


    }); 

Однако, если я попытаюсь получить то же самое для двух других 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'); 
     });