绑定两个滚动条同时滚动

最新推荐文章于 2025-06-12 19:11:46 发布

Candy_home

最新推荐文章于 2025-06-12 19:11:46 发布

阅读量7.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 学习文章标签：两个滚动条同时滚动滚动条滚动事件滚动条js 滚动条示例

本文链接：https://blog.youkuaiyun.com/Candy_home/article/details/53262428

js 学习专栏收录该内容

16 篇文章

订阅专栏

这篇博客介绍了如何使用JQuery实现两个滚动条在用户操作时保持同步滚动。主要涉及scroll事件、scrollLeft和scrollTop方法，提供了详细的HTML、CSS和JS代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

了解知识背景(使用JQuery)：

使用到的方法：

1> sroll()方法：当用户滚动指定的元素时，会发生 scroll 事件 --> http://www.w3school.com.cn/jquery/event_scroll.asp

2>srollLeft():返回或设置匹配元素的滚动条的水平位置 --> http://www.w3school.com.cn/jquery/css_scrollleft.asp

3>scrollTop() ::返回或设置匹配元素的滚动条的垂直位置 --> http://www.w3school.com.cn/jquery/css_scrolltop.asp

示例：

HTML

<div>
  <div class="fixedWidth">
      <div class="A">
        A is here！！！
        
      </div>
  </div>
  
  <div class="fixedWidth">
    <div class="B">
        B is here！！！
    </div>
  </div>  
</div>

CSS代码：

.A{
  width:1270px;
  background-color:lightblue;
}

.B{
  width:1270px;
  background-color:yellow;
}

.fixedWidth{
  width: 500px;
  overflow: auto;
}

JS代码：

    // 加载滚动条的相互绑定事件 
    //A绑定B
    $(".A").scroll(function(event){
      $(".B").scrollLeft($(this).scrollLeft()); 
      $(".B").scrollTop($(this).scrollTop()); 
    });
    //B绑定A
    $(".B").scroll(function(event) {
      $(".A").scrollLeft( $(this).scrollLeft());
      $(".A").scrollTop( $(this).scrollTop());
    });