我有两个 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/
也许任何人都可以看出我做错了什么?
提前致谢。
最佳答案
您必须将窗口高度
放入案例中并从元素高度中减去它。
$(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/
关于javascript - 如何在具有不同高度的两个元素之间同步滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19786080/