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

如果没有更多的代码可以查看，我无法真正建议直接对您的代码进行更改，但我已设法使用以下{{3来模拟您正在寻找的工作版本}}

我还将等式细分为几部分，以便更容易看到发生了什么。

因此，当您滚动text div时，photos div会以相同的比例滚动，具体取决于两个容器的高度。

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>

希望它可以帮助您解决问题。

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

1 个答案: