时间戳

首页 > 解决方案 > 将 div 内部的滚动匹配到另一个外部 div

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

问题描述

我试过让它在 JSFiddle 上工作。

http://jsfiddle.net/sgcer/3132/

我目前有两个 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());
});

标签： jqueryhtmlcss

解决方案

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

这将起作用。

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

推荐阅读