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

我有两个专栏，

#照片

和

#文本

。我的

#photos

列较长，逻辑上包含一些图像。当我滚动页面时，我喜欢

#photos

列的滚动速度比

#text

列的滚动速度快，这样两列都会在底部对齐

我使用jQuery的

$（窗口）.scroll（）

更新

#photos

列：

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

如何计算目标

---

我知道它可能与

$（文档）.height（）

，

$（“#照片”）.height（）

和

$（窗口）.scrollTop（）

有关，但我想不出公式。

没有更多的代码可看，我不能建议直接对代码进行修改，但我已经成功地模拟了一个您可能正在寻找的工作版本

我还将方程分解成几个部分，以便更容易地看到发生了什么

因此，当您滚动

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:

正文1

正文2

文本3

正文4

文本5

正文6

文本7
照片1

照片1

照片2

照片2

照片3

照片3

照片4

照片4

照片5

照片5

照片6

照片6

照片7

照片7

---

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

那么，有多少滚动条？三个？还是两个？谢谢，这正是我需要的。也谢谢你把它拆开，我现在明白了。你很聪明。

<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>