Question

我这里有一个代码笔 - https://codepen.io/mt-ttmt/pen/NMRBBe

它只是容器中的两个div。

两个div分别水平滚动。

滚动一个

时是否可以同时滚动

因此，如果您滚动顶部div，则两者都会滚动，反之亦然

(function(){

  $(window).scroll(function() {

    $(".content-top").scrollLeft(function() {
      $(".content-bottom").scrollLeft($(this).scrollLeft());
    });

  })

})

代码发布在这里

$(function(){
  
  $(window).scroll(function() {
    
    $(".content-top").scrollLeft(function() {
      $(".content-bottom").scrollLeft($(this).scrollLeft());
    });
    
  });
  
});

.wrapper{
  width: 500px;
}

.scroll-top{
  overflow-y: scroll;
}

.scroll-bottom{
  overflow-y: scroll;
}

.content{
  width: 2500px;
  height: 50px;
}

.scroll-top {
  background: linear-gradient(to right, black , lightgreen);
}
  
.scroll-bottom {
  background: linear-gradient(to right,  yellow, black);
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="scroll-top">
    <div class=" content content-top">

    </div>
  </div>
  <div class="scroll-bottom">
    <div class=" content content-bottom">

    </div>
  </div>  
</div>

Answer 1

内部代码：

$(window).scroll(function() {


})

仅在身体滚动后才会起作用。

你也需要使用带有溢出选项的父div。

  $('.scroll-top').scroll(function() {
    $('.scroll-bottom').scrollLeft($(this).scrollLeft());
  });

.wrapper{
  width: 500px;
}
.scroll-top{
  overflow-y: scroll;
}
.scroll-bottom{
  overflow-y: scroll;
}
.content{
  width: 1500px;
  height: 50px;
  }
.content-top{
    background: linear-gradient(to right, black , lightgreen);
  }
 .content-bottom{
    background: linear-gradient(to right,  yellow, black);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="scroll-top">
    <div class="content content-top">
    </div>
  </div>
  <div class="scroll-bottom">
    <div class="content content-bottom">
    </div>
  </div>  
</div>

jQuery水平滚动单独的对象

1 个答案: