绑定两个滚动条同时滚动

这篇博客介绍了如何使用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());
    });



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值