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

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元素的滚动速度:

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

• 触发 .scrollTop() 的 #block

它从一开始就工作，#block 元素滚动比 #page 元素滚动快，但最后，#block 是没有完全滚动。

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

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

提前致谢。

Answer 1

您必须将窗口高度 放入案例中并从元素高度中减去它。

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

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

这是更新后的 fiddle :http://jsfiddle.net/bQYrf/4/