jQuery Dual Scroll

Script to keep two scrolling panels synced, regardless of their content.

This script is an experiment - You should not use it as is in your site.

Lorem ipsum

Lorem ipsum dolor sit amet...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum

Lorem ipsum dolor sit amet...

Lorem ipsum

HTML

<dl class="compare">
  <dl>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </dl>
  <dd>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </dd>
</dt>

CSS

.compare {
  overflow : auto;
}

.compare dl, .compare dd {
  width : 290px;
  height : 200px;
  overflow : auto;
  margin : 0;
}

JavaScript

$(function() {

  //the long scrolling elements
  var left = $(".compare dl");
  var right = $(".compare dd");

  //get the height offset
  var height = parseInt(right.css("height"));

  //assign the handling
  var hold = false;
  var window_scroll = true;
  left.add(right)
    .mouseenter(function() { window_scroll = false; })
    .mouseleave(function() { window_scroll = true; });
      
  //handle monitoring how the window is changing
  window.onmousewheel = function(e) {
    if (window_scroll) return true;

    //check the current scroll position
    var percent = left.scrollTop() / (left[0].scrollHeight - height);
    var going_up = e.wheelDeltaX < 0;
    var at_bottom = percent == 1

    return going_up == at_bottom;
  };

  //syncs to long scrolling elements
  var locked = false;
  var sync_to = function(source, target) {

    //make sure not to capture multiple scroll events
    //since one call is setting the scroll of the other
    //element it causes them to both fire
    if (locked) { return locked = false, true; }
    locked = true;

    //make sure they move relative to each other
    var percent = source.scrollTop() / (source[0].scrollHeight - height);
    var top = (target[0].scrollHeight - height) * percent;
    target[0].scrollTop = top;
  };

  //cause the two elements to sync
  left.scroll(function(e) { sync_to.call(e, left, right); });
  right.scroll(function(e) { sync_to.call(e, right, left); });

});

Oct 11 2009