绑定两个滚动条同时滚动

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

A is here!!!
B is here!!!


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());
    });



你可能感兴趣的:(js,学习)