绑定两个滚动条同时滚动

了解知识背景(使用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());
    });