如何在两个不同高度的元素之间同步滚动

Question

我有两个DIV元素#page和#block:

<div id="page"></div>
<div id="block"></div>

#block元素具有固定的位置和长的内容与overflow:hidden属性.

#page元素里面也有一些内容,但它的高度#page会比#block高度更长或更短.

我的目标是在这两个元素之间实现同步滚动.像这样的东西:

我需要计算的速度#block元件滚动,由于页眉和页脚元素#page和#block应在从开始和在涡管的端部相同的位置.

我试图实现这个目标的方式:

• 计算#page元素的高度
• 计算#block元素含量的高度(因为块元素是固定的并且具有固定高度)

• 计算#block元素滚动速度:

  $("#block").outerHeight / $("#page").outerHeight

• 触发.scrollTop()了#block

它从一开始就工作,#block元素滚动比元素滚动更快#page,但最后,#block不会完全滚动.

这是我的JsFiddle:http://jsfiddle.net/zur4ik/bQYrf/2/

也许任何人都可以看到我做错了什么？

提前致谢.

Answer 1

你必须window height进入案例并从元素高度中减去它.

$(window).scroll(function() {
    var pageH = $('#page').height() - $(this).height();
    var pageT = this.scrollY - $('#page').offset().top;

    $('#block').scrollTop(pageT / pageH * ($('#blockLength').height() - $(this).height()));
});

这是更新的小提琴:http://jsfiddle.net/bQYrf/4/