我正在尝试使用以下代码为两个 DIV
实现同步滚动。
$(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
值。我需要找到滚动内容的百分比并计算其他 div
的相应 scrollTop
值。我不确定,如何找到实际高度和当前滚动位置。
2) 此问题仅在 firefox
中发现。在 firefox 中,滚动不像在其他浏览器中那样流畅。我认为这是因为上面的代码正在创建滚动事件的无限循环。
我不确定,为什么这只发生在 firefox 上。有什么方法可以找到滚动事件的来源,以便我解决这个问题。
如有任何帮助,我们将不胜感激。
最佳答案
您可以使用 element.scrollTop/(element.scrollHeight - element.offsetHeight)
获取百分比(它将是 0
和 之间的值1
)。因此,您可以将其他元素的 (.scrollHeight - .offsetHeight)
乘以该值以进行比例滚动。
为避免在循环中触发监听器,您可以暂时取消绑定(bind)监听器,设置 scrollTop
并再次重新绑定(bind)。
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);
关于javascript - 使用 jQuery 同步滚动?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18952623/