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

How do I scroll a column at a different speed?

本文关键字：一列 滚动 速度      更新时间：2023-09-26

我有两列，#photos和#text。我的#photos列较长，逻辑上包含一些图像。当我滚动页面时，我喜欢#photos列比#text列滚动得更快，这样两列都会在底部对齐。

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

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

如何计算targetY？

我知道这可能与$(document).height()、$("#photos").height()和$(window).scrollTop()有关，但我搞不清公式。

如果没有更多的代码，我真的不能建议直接对代码进行更改，但我已经用下面的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>

希望它能帮你解决问题。

相关文章：