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

I have two DIV elements #page and #block :

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

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

#block element has fixed position and long content inside with overflow:hidden property.

#块元素有固定的位置和长内容，内部有溢出:隐藏属性。

#page element has some content inside too, but it height of #page will be longer or shorter then #block height.

#page元素内部也有一些内容，但是#page的高度将比#块高度长或短。

My goal is to achieve synchronized scroll between this two elements. Something like this:

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

I need to calculate speed of #block element scroll, because header and footer elements of #page and #block should be at same position from beginning and at the end of scroll.

我需要计算#block元素滚动的速度，因为#page和#block的页眉和页脚元素从开始到滚动结束都应该在相同的位置。

The way I tried to achieve this:

我努力做到这一点的方法是:

• Calculated height of #page element
• 计算#页面元素的高度。
• Calculated height of #block element content (because block element is fixed and has alwas fixed height)
• #块元素内容的计算高度(因为块元素是固定的，并且是固定高度的)

• Calculated #block element scroll speed by:

  计算#块元素滚动速度:

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

  $(" #块”)。outerHeight / $(" #页”).outerHeight

• Triggered .scrollTop() of #block

  触发.scrollTop #块的()

It's working from the beginning and #block element scroll is faster then #page element scroll, but at the end, #block is not scrolled fully.

它从开始和#块元素滚动的速度更快，然后#页面元素滚动，但是在最后，#块没有完全滚动。

Here is my JsFiddle: http://jsfiddle.net/zur4ik/bQYrf/2/

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

Maybe anyone can see what I'm doing wrong?

也许有人能看出我做错了什么?

Thanks in advance.

提前谢谢。

3 个解决方案

#1

You must take the window height into the case and subtract it from the elements heights.

你必须把窗口高度带入箱子，并从元素高度减去它。

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

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

Here's the updated fiddle: http://jsfiddle.net/bQYrf/4/

#2

I have found two examples of this same question already answered in SO:

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

If I understand you question correctly this is exactly what you are looking for: Synchronized scrolling using jQuery?

如果我理解正确的话，这正是您想要的:使用jQuery进行同步滚动?

This is also a good solution: How do I synchronize the scroll position of two divs?

这也是一个很好的解决方案:如何同步两个div的滚动位置?

#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/

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