Question

我试图使它在JSFiddle上工作。

我目前有两个div同步滚动，div＃top和div＃bottom，但是我实际上希望#bottom div与正在滚动的div＃top内容同步滚动，即div中的文本不容器div任何帮助将不胜感激！

html

<div class="container">
  <div id="top">
    <p>first column</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
  </div>
  </div>
<div id="bottom">
    <p>second column content</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
    <p>Content Here</p>
</div>

css

 .container {
  width: 120px;
  background-color: red;
  height: 315px;
  position: absolute;
  overflow: scroll;
  top: 20px;
}
#top {
  left: 0;

}


#bottom {
  top: 20px;
    position: absolute;
    left       : 50%;
    overflow   : auto;
    overflow-x : scroll;
    overflow-y : auto;
}

jQuery

 $('#bottom').on('scroll', function () {
    $('#top').scrollTop($(this).scrollTop());
});

Answer 1

(function() {
    var target = $("#bottom");
    $("#top").scroll(function() {
    target.prop("scrollTop", this.scrollTop)
       .prop("scrollLeft", this.scrollLeft);
  });
})();

这将起作用。

滚动顶部时，它也会同时滚动底部div。

Answer 2

因此，如果有人要这样做，我已经借助此插件解决了。

安装此插件：

https://www.jqueryscript.net/demo/Synchronize-Scrolling-Across-Elements-jQuery-ScrollSync/

然后让它执行我想要的代码：

html

 body { padding-bottom: 100px; padding-top: 100px; }

    .container {
      float: left;
      width: 33.3%;
      height: 400px;
      overflow: scroll;
    }

    .container-2{
      margin-left: 100px;
      width: 30vw;
    }

    .content-2 {
      box-sizing:border-box;
      float: left;
      width: 1000px;
      height: 1000px;
      /* background-color: pink; */
      margin-top: 50px;
    }

      .p-text {
        background-color: purple;
      }

    .content{
      box-sizing:border-box;
      float: left;
      width: 1000px;
      height: 1000px;
      background-color: #E74C3C;
    }

css

$('.container').scrollsync();

js

JFrame

干杯。

将div内部滚动匹配到另一个div外部匹配

2 个答案: