Question

这是链接供参考
http://readwrite.com/2013/02/07/robert-scoble-favorite-apps-facebook-gmail-youtube
如果我们滚动中心部分，在这个站点中心和右侧部分都滚动一次...
我完成了与此代码相同的事情： -

这是html代码： -

<div id="left" class="linked">
<img height="600" src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div>
<div id="right" class="linked">
<img  src="http://www.visitingdc.com/images/eiffel-tower-picture.jpg">
</div><br>

脚本： -

$(function(){

    $('.linked').scroll(function(){
        $('.linked').scrollTop($(this).scrollTop());    
    })

})

CSS： -

<br>#left { width: 300px; height: 400px; overflow: scroll; float: left; }
#right { width: 300px; height: 400px; overflow: scroll; float: left; }

但我有一点点问题在上面的网站上都是一次滚动，但是右侧滚动的速度很慢......？请帮帮我......

Answer 1

您必须覆盖其中一个div（以js为单位）的滚动行为，并将其设置为例如另一个0.5。看看这里： http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

Answer 2

http://jsfiddle.net/cuVC7/0/

请看一下这个解决方案。虽然不是很普遍，但它可以给你一个很好的开始。当您在小提琴的CSS部分更改其高度时，右div的速度会自动调整。

应该注意的是，像这样的2D视差相关问题需要基本数学知识。上面的示例使用此模型：

确定页面的滚动条，因此我们知道滚动了多少div。
使用页面高度，窗口高度和左div高度的知识来计算相对滚动。也就是说，从0到1的值向我们显示页面是否完全没有滚动，滚动了一些量，或滚动到最后。
根据窗口大小将关联滚动映射到慢图层的尺寸，以确定慢图层的精确滚动。

如何实现视差滚动？

2 个答案: