如何以不同的速度滚动列？

Question

我有两列,#photos和#text.我的#photos专栏更长,逻辑上保留了一些图像.当我滚动页面时,我喜欢#photos列比#text列更快滚动,因此两列在底部对齐.

我使用jQuery $(window).scroll()来更新#photos列:

$("#photos").css("top", Math.round(targetY));

我如何计算targetY？

我知道它可能有一些做$(document).height(),$("#photos").height()和$(window).scrollTop(),但我想不通的公式.

Answer 1

如果没有更多的代码可供查看，我真的无法建议直接对您的代码进行更改，但我已经成功地使用以下jsFiddle模拟了您可能正在寻找的内容的工作版本。

我还将方程分解为几个部分，以便更容易了解发生了什么。

因此，当您滚动textdiv 时，photosdiv 会根据两个容器的高度以相同的比例滚动。

JavaScript：

$(document).ready(function(){
    $('#textScroll').scroll(function(){
        var textDiff = $('#text').height() - $('#textScroll').height();
        var textDiffRatio = (1 / textDiff) * $('#textScroll').scrollTop();
        var photosDiff = $('#photos').height() - $('#photosScroll').height();
        var photosScrollTop = textDiffRatio * photosDiff;
        $('#photosScroll').scrollTop(photosScrollTop);
    });
});

HTML：

<div id="textScroll" style="width:100px; height:100px; overflow:auto;">
    <div id="text">
        Text 1<br />
        Text 2<br />
        Text 3<br />
        Text 4<br />
        Text 5<br />
        Text 6<br />
        Text 7
    </div>
</div>
<div id="photosScroll" style="width:100px; height:100px; overflow:auto;">    
    <div id="photos">
        Photos 1<br />
        Photos 1<br />
        Photos 2<br />
        Photos 2<br />
        Photos 3<br />
        Photos 3<br />
        Photos 4<br />
        Photos 4<br />
        Photos 5<br />
        Photos 5<br />
        Photos 6<br />
        Photos 6<br />
        Photos 7<br />
        Photos 7
    </div>
</div>

希望它能帮助您解决您的问题。