使用DataTable，th和td没有同时X轴滚动，绑定两个滚动条同时滚动

最新推荐文章于 2023-03-06 14:19:42 发布

高压锅_1220

最新推荐文章于 2023-03-06 14:19:42 发布

阅读量360

点赞数 2

分类专栏： JavaScript

原文链接：https://blog.csdn.net/Candy_home/article/details/53262428?utm_source=blogxgwz4

版权

JavaScript 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

1. 基本知识点：

sroll()方法：当用户滚动指定的元素时，会发生 scroll 事件
srollLeft():返回或设置匹配元素的滚动条的水平位置
scrollTop() ::返回或设置匹配元素的滚动条的垂直位置

案例：A和B绑定同时滚动

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


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

    // 加载滚动条的相互绑定事件 
    //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());
    });