faire défiler les autres barres de défilement avec la barre de défilement

J’ai 3 divs avec des barres de défilement. Si je fais défiler dans div 1 je veux faire défiler div 2 et 3 dans la direction opposée. La distance parcourue doit être la moitié de la distance de div 1.

C’est ce que j’ai maintenant (petite partie, le repos est en jsfiddle), qui fonctionne pour 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; }); 

Cependant, si j’essaie d’obtenir la même chose pour les 2 autres divs, je ne peux plus rien faire défiler. En effet, div 1 déclenche les div 2 et div 2, par exemple, le retour au div 1. J’ai essayé de résoudre ce problème avec le code de désactivation, mais cela n’aide pas.

Est-ce que quelqu’un peut m’aider?

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

Aucun manque de respect envers @EmreErkan et @Simon pour leurs efforts. Voici une version sans clic de ceci.

 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 atsortingbutes (data-scroll) function updateScrollPos() { $boxes.each(function(){ $this = $(this); $this.data("scroll",$this.scrollTop()); }); } 

Violon

Vous pouvez utiliser une variable pour déterminer la zone de texte active avec .mousedown() et faire le tour si elle est active;

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

Vous pouvez vérifier votre jsFiddle mis à jour ici .

Enfin obtenu une solution dynamic pour cela, était plus complexe que je pensais, mais je pense que je l’ai eu:

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