一尘不染

如何同步两个div的滚动位置?

javascript

我想将2个div的大小设置为特定宽度(即500px)。一个高于另一个水平对齐。

顶部框应隐藏其滚动条,底部框应显示滚动条,并且当​​用户滚动时,我希望顶部框的偏移量更改为底部框的值。因此,当底部DIV水平滚动时,似乎顶部DIV也同时滚动。

我很高兴在Jquery中做到这一点,如果它使过程更容易。


阅读 455

收藏
2020-05-01

共1个答案

一尘不染

$(‘#bottom’).on(‘scroll’, function () {
$(‘#top’).scrollTop($(this).scrollTop());
});

在这里,我们用尽.scrollTop()了所有的价值,scrollTop使用滚动条从元素中获取值,并scrollTop为另一个元素设置来同步其滚动位置

假设您的底部元素的ID为bottom,顶部元素的ID为top

您可以top使用CSS 隐藏元素的滚动条:

#top {
    overflow : hidden;
}

我想我从未真正有理由这样做,但是在实际操作中看起来很酷。

2020-05-01