如何以不同的速度滚动列? [英] How do I scroll a column at a different speed?

问题描述

我有两列，#photos和#text.我的#photos列较长，并且从逻辑上讲包含一些图像.滚动页面时，我喜欢#photos列的滚动速度比#text列的滚动速度快，这样两列都在底部对齐.

I have two columns, #photos and #text. My #photos column is longer and logically holds some images. When I scroll the page, I like the #photos column to scroll faster than the #text column, so that both columns align at the bottom.

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

I use jQuery's $(window).scroll() to update the #photos column:

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

如何计算targetY?

How do I calculate targetY?

我知道它可能与$(document).height()，$("#photos").height()和$(window).scrollTop()有关，但是我无法弄清楚公式.

I know it probably has something to do with $(document).height(), $("#photos").height() and $(window).scrollTop(), but I can't figure out the formula.

推荐答案

没有更多代码可供查看，我不能真正建议直接对您的代码进行更改，但我设法模拟了一个有效的版本以下 jsFiddle 可能会为您寻找的东西.

Without a bit more code to look at, I can't really suggest changes to make directly to your code but I've managed to mock up a working version of what you're perhaps looking for with the following jsFiddle.

我还将等式分解为多个部分，以便更轻松地了解发生了什么.

I've also broken down the equation into parts to make it easier to see what's going on.

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

So as you scroll the text div, the photos div scrolls at the same ratio depending on the height of the two containers.

JavaScript:

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>

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

Hope it helps you solve your problem.

这篇关于如何以不同的速度滚动列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！