http://hugoware.net/snippets/jquery-dual-scroll


html


css



.div01{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}
.div02{width:200px;height:200px;overflow-y:auto;background:#000;color:#fff;}


jQuery


var tbox1 = $('.tlans-box .txt-box .txtarea-view.tbox1');
var tbox2 = $('.tlans-box .txt-box .txtarea-view.tbox2');

var height = parseInt(tbox2.css('height'));

var hold = false;
var window_scroll = true;
tbox1.add(tbox2)
   .mouseenter(function() { window_scroll = false; })
   .mouseleave(function() { window_scroll = true; });

var locked = false;
var sync_to = function(source, target) {
   if (locked) { return locked = false, true; }
   locked = true;

   var percent = source.scrollTop() / (source[0].scrollHeight - height);
   var top = (target[0].scrollHeight - height) * percent;
   target[0].scrollTop = top;
}

tbox1.scroll(function(e) { sync_to.call(e, tbox1, tbox2); });
tbox2.scroll(function(e) { sync_to.call(e, tbox2, tbox1); });


+ Recent posts