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

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/

Answer 2

我已经在SO中找到了这个问题的两个例子：

如果我理解你的问题，这正是你要找的： Synchronized scrolling using jQuery?

这也是一个很好的解决方案： How do I synchronize the scroll position of two divs?

Answer 3

function getClientHeight()
{
  return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientHeight:document.body.clientHeight;
}

var clientHeight = getClientHeight();

$(window).scroll(function() {

    var diff = ($("#blockLength").height() - clientHeight) / ($("#page").height() - clientHeight);
    var blocktoSet = $(window).scrollTop() * diff;

    $("#block").scrollTop(blocktoSet);

    console.log()



});

http://jsfiddle.net/PeGky/1/