有没有一种方法可以使滚动div使用jQuery触发另一个div滚动？

Question

我正在使用两个div元素

当用户滚动div＃element-A时，我希望＃element-A自动滚动到与＃element-b相同的位置

我当前的代码如下：

var currentPlan = $('#current-A'),
  optionsPlan = $('#current-B'),
  combinedScroll = optionsPlan.scrollTop();

optionsPlan.scroll(function() {

  currentPlan.scroll();
});

#element-A,
#element-B {
  width: 50%;
  height: 100vh;
  float: left;
  overflow: auto;
}

#element-A {
  background: orange;
}

#element-B {
  background: yellow;
}

.content {
  padding-bottom: 100vh;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="element-A">
  <div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <h1 id="header-one-target" Header One</h1>
  </div>
</div>

<div id="element-B">
  <div class="content">
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <h1 id="animate-hd-b">Header Two</h1>
  </div>
</div>

我知道我在jQuery中缺少一些简单的东西，但似乎找不到解决方法。

Answer 1

            
  let target = $("#current-B")[0];
  $("#current-A").scroll(function() {
    target.scrollTop = this.scrollTop;
  });

section {
  display: flex;
  justify-content: space-between;
}
.scroll-box {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section>
<div class="scroll-box" id="current-A"> 
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
</div>

<div class="scroll-box" id="current-B"> 
  <p>item item item item item item item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
  <p>item</p>
</div>
<section>

Answer 2

jQuery

$('#element-A').on('scroll', function () {
    $('#element-B').scrollTop($(this).scrollTop());
});

CSS （如果您不希望同步div中的滚动条）

#element-B{
    overflow : hidden;
}

代码段

$('#element-A').on('scroll', function () {
    $('#element-B').scrollTop($(this).scrollTop());
});

#element-B{
   overflow : hidden;
   display: inline-block;
   height: 100px;
   position: absolute;
   right:50px;
}

#element-A{
   display: inline-block;
   height: 100px;
   overflow : scroll;
   width:155px;
}

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div id="element-A">
          <div class="content">
            <p>content</p>
            <p>content</p>
            <p>content</p> 
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <h1 id="header-one-target"Header One</h1>
          </div>
        </div>

        <div id="element-B">
          <div class="content">
            <p>content</p>
            <p>content</p>
            <p>content</p> 
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <p>content</p>
            <h1 id="animate-hd-b">Header Two</h1>
          </div>
        </div>