当前位置: 首页 > 面试题库 >

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

公冶子琪
2023-03-14
问题内容

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

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

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


问题答案:

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

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

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

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

#top {
    overflow : hidden;
}

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



 类似资料:
  • 在我的一个活动中有一个父容器,它调用由一个水平scrollview组成的子容器作为对象之一。有点像recyclerview,其中放置了行对象,有一个由水平滚动视图组成的公共行/项布局。 我的目标是同步horizontalscrollview的位置,这样,当我在其中一个对象上从位置1水平滚动到位置2时,包含HorizonalScrollview的所有其他项目都会从位置1更新到位置2。 这是我的主容器

  • 我有一个元素,它本身有一个滚动条,还有一个单独的,它有一个滚动条。如何使其中一个滚动条与另一个滚动条的位置匹配? 我一直在查找获取滚动条位置的方法。 因为它们都返回不同的值,所以我必须知道它们的最大位置。

  • 在positon=fixed的div上,我似乎无法滚动页面。 当我使用下面的代码时: 在overlay(类名)div中,它不起作用,因为overlay div有一个固定的位置。

  • 问题内容: 给出以下HTML代码段: 您(通常)会得到一个黑匣子,其中的滚动条包含一个数字1至30,每个数字都在新行中。 您可以在该框内上下滚动。 我现在需要的是找出框处于哪个滚动位置的可能性。假设每行高15像素,然后向下滚动到数字10,我想得到的结果是数字150(15像素* 10行)。 我在哪里可以找到这个号码? 我手上有普通的JavaScript和jQuery。 问题答案: 您需要使用该属性。

  • 滚动条显示位置都是在最右侧或最底部,怎样控制滚动条显示在某一个div里面或为一个位置? 不是说滚动位置,滚动条的显示位置

  • 本文向大家介绍Android实现两个ScrollView互相联动的同步滚动效果代码,包括了Android实现两个ScrollView互相联动的同步滚动效果代码的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了Android实现两个ScrollView互相联动的同步滚动效果代码。分享给大家供大家参考,具体如下: 最近在做一个项目,用到了两个ScrollView互相联动的效果,简单来说联动效果意