jQuery一起水平滚动单独的对象答案

【问题标题】：jQuery horizontally scroll separate objects togetherjQuery一起水平滚动单独的对象
【发布时间】：2018-04-26 17:11:04
【问题描述】：

我这里有一支代码笔 - 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>

【问题讨论】：

“我这里有一支密码笔” 太好了。请在此处发minimal reproducible example。您现在已经完成了一半，所以不会花太多力气。跨度>
使用 jquery 的add(...) 将两个元素添加到同一个 jquery 对象中
j08691 - 如果我在这里发布代码将不起作用
@ttmt 那是因为你需要包含 jquery。
我确实包含了 jQuery

标签： jquery

【解决方案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>

【讨论】：