Synchronisé de défilement à l'aide de jQuery?

C'est ce que j'utilise. Il suffit d'appeler le syncScroll(...) fonction avec les deux éléments que vous souhaitez synchroniser. J'ai trouvé pawel la solution a eu des problèmes avec la poursuite lentement défiler après que la souris ou le trackpad a été fait avec l'opération.

Voir exemple de travail ici.

//Sync up our elements.
syncScroll($('.scroll-elem-1'), $('.scroll-elem-2'));


/***
*   Synchronize Scroll
*   Synchronizes the vertical scrolling of two elements.
*   The elements can have different content heights.
*
*   @param $el1 {Object}
*       Native DOM element or jQuery selector.
*       First element to sync.
*   @param $el2 {Object}
*       Native DOM element or jQuery selector.
*       Second element to sync.
*/
function syncScroll(el1, el2) {
  var $el1 = $(el1);
  var $el2 = $(el2);

  //Lets us know when a scroll is organic
  //or forced from the synced element.
  var forcedScroll = false;

  //Catch our elements' scroll events and
  //syncronize the related element.
  $el1.scroll(function() { performScroll($el1, $el2); });
  $el2.scroll(function() { performScroll($el2, $el1); });

  //Perform the scroll of the synced element
  //based on the scrolled element.
  function performScroll($scrolled, $toScroll) {
    if (forcedScroll) return (forcedScroll = false);
    var percent = ($scrolled.scrollTop() / 
      ($scrolled[0].scrollHeight - $scrolled.outerHeight())) * 100;
    setScrollTopFromPercent($toScroll, percent);
  }

  //Scroll to a position in the given
  //element based on a percent.
  function setScrollTopFromPercent($el, percent) {
    var scrollTopPos = (percent / 100) *
      ($el[0].scrollHeight - $el.outerHeight());
    forcedScroll = true;
    $el.scrollTop(scrollTopPos);
  }
}

Fonctionne comme sur des roulettes (voir DÉMO)

$(document).ready(function(){

  var master = "div1"; //this is id div
  var slave = "div2"; //this is other id div
  var master_tmp;
  var slave_tmp;
  var timer;

  var sync = function ()
  {
    if($(this).attr('id') == slave)
    {
      master_tmp = master;
      slave_tmp = slave;
      master = slave;
      slave = master_tmp;
    }

    $("#" + slave).unbind("scroll");

    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);

    var x = percentage * ($("#" + slave).get(0).scrollHeight - $("#" + slave).get(0).offsetHeight);

    $("#" + slave).scrollTop(x);

    if(typeof(timer) !== 'undefind')
      clearTimeout(timer);

    timer = setTimeout(function(){ $("#" + slave).scroll(sync) }, 200)
  }

  $('#' + master + ', #' + slave).scroll(sync);

});

Si vous ne voulez pas proportionnelle de défilement, mais plutôt pour faire défiler une quantité égale de pixels sur chaque champ, vous pouvez ajouter de la valeur du changement de la valeur actuelle du champ, vous êtes liaison la de défilement-événement.

Disons que #left est le petit champ, et #right est le plus grand champ.

var oldRst = 0;

$('#right').on('scroll', function () {
    l = $('#left');
    var lst = l.scrollTop();
    var rst = $(this).scrollTop();

    l.scrollTop(lst+(rst-oldRst)); //<-- like this

    oldRst = rst;
});

https://jsfiddle.net/vuvgc0a8/1/

En ajoutant de la valeur du changement, et pas seulement de définir égal à #right's scrollTop(), vous pouvez faire défiler vers le haut ou vers le bas dans le petit champ, quelle que soit sa scrollTop() étant de moins que le plus grand champ. Un exemple de ceci est la page d'un utilisateur sur Facebook.

C'est ce que j'ai besoin quand je suis venu ici, j'ai donc pensé que je pourrais partager avec vous.

De la pawel solution (première réponse).

Pour la horizzontal défilement synchronisé à l'aide de jQuery c'est la solution:

var $divs = $('#div1, #div2'); //only 2 divs
var sync = function(e){
    var $other = $divs.not(this).off('scroll');
    var other = $other.get(0);
    var percentage = this.scrollLeft / (this.scrollWidth - this.offsetWidth);
    other.scrollLeft = percentage * (other.scrollWidth - other.offsetWidth);
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}

$divs.on('scroll', sync);

JSFiddle

Une autre solution pour plusieurs horizontalement synchronisé divs est présent, mais il fonctionne pour les divs avec la même largeur.

var $divs = $('#div1, #div2, #div3'); //multiple divs
var sync = function (e) {
    var me = $(this);
    var $other = $divs.not(me).off('scroll');
    $divs.not(me).each(function (index) {
        $(this).scrollLeft(me.scrollLeft());
    });
    setTimeout(function () {
        $other.on('scroll', sync);
    }, 10);
}
$divs.on('scroll', sync);

NB: Uniquement pour les divs avec la même largeur

JSFiddle