使用jQuery同步滚动？

Question

我正在尝试DIV使用以下代码实现两个同步滚动.

DEMO

$(document).ready(function() {
    $("#div1").scroll(function () { 
        $("#div2").scrollTop($("#div1").scrollTop());
    });
    $("#div2").scroll(function () { 
        $("#div1").scrollTop($("#div2").scrollTop());
    });
});

#div1#div2比方说,它具有相同的内容但不同的大小

#div1 {
 height : 800px;
 width: 600px;
}
#div1 {
 height : 400px;
 width: 200px;
}

有了这段代码,我面临两个问题.

1)滚动没有很好地同步,因为div具有不同的大小.我知道,这是因为,我直接设定了scrollTop价值.我需要找到滚动内容的百分比并scrollTop为另一个计算相应的值div.我不确定,如何找到实际的高度和当前滚动位置.

2)此问题仅在firefox.在Firefox中,滚动不像其他浏览器那样流畅.我认为这是因为上面的代码创建了一个无限循环的滚动事件.我不确定,为什么这只发生在firefox上.有没有办法找到滚动事件的来源,以便我可以解决这个问题.

任何帮助将不胜感激.

Answer 1

您可以使用element.scrollTop / (element.scrollHeight - element.offsetHeight)获取百分比(它将是0和之间的值1).因此,您可以将其他元素乘以(.scrollHeight - .offsetHeight)此值以进行比例滚动.

为了避免在循环中触发侦听器,您可以暂时取消绑定侦听器,scrollTop再次设置和重新绑定.

var $divs = $('#div1, #div2');
var sync = function(e){
    var $other = $divs.not(this).off('scroll'), other = $other.get(0);
    var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
    other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
    // Firefox workaround. Rebinding without delay isn't enough.
    setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);

http://jsfiddle.net/b75KZ/5/