如何同步兩個div的滾動位置？

Question

我想要有2個大小適合特定寬度（即500px）的div。一個在另一個之上水平排列。

的機頂盒應該隱藏它的滾動條，底部應顯示一個滾動條，當用戶滾動我想偏移機頂盒的切換到下框的值。因此，當底部DIV水平滾動時，看起來頂部DIV也同時滾動。

我很高興在Jquery中這樣做，如果它使過程更容易。

Answer 1

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

這裏我們使用.scrollTop()所有它的價值，由具有滾動條的元素得到scrollTop價值，併爲其他元素設定scrollTop同步它們的滾動位置：http://api.jquery.com/scrollTop

這是假設您的底部元素的ID爲bottom，頂部元素的ID爲top。

您可以隱藏滾動條爲top元素使用CSS：

#top { 
    overflow : hidden; 
} 

這裏是一個演示：http://jsfiddle.net/sgcer/1884/

我想我從來沒有真正有一個理由這樣做，但它在行動中看起來很酷。

Answer 2

我一直在尋找一個雙向的解決方案，並感謝你的一切，你contibutions幫我做這個：

$('#cells').on('scroll', function() { 
$('#hours').scrollTop($(this).scrollTop()); 
$('#days').scrollLeft($(this).scrollLeft());}); 

查看的jsfiddle：https://jsfiddle.net/sgcer/1274/

希望它幫助別人一天： - ）

Answer 3

我知道這是一個古老的線程，但也許這會幫助別人。 如果您需要同步雙向滾動，則不足以處理兩個容器的滾動事件並設置滾動值，因爲滾動事件正在進入循環，並且滾動不順暢（嘗試垂直滾動通過鼠標輪由Hightom給出的例子）。

這裏是你如何檢查，如果您已經同步滾動的例子：

var isSyncingLeftScroll = false; 
 
var isSyncingRightScroll = false; 
 
var leftDiv = document.getElementById('left'); 
 
var rightDiv = document.getElementById('right'); 
 

 
leftDiv.onscroll = function() { 
 
    if (!isSyncingLeftScroll) { 
 
    isSyncingRightScroll = true; 
 
    rightDiv.scrollTop = this.scrollTop; 
 
    } 
 
    isSyncingLeftScroll = false; 
 
} 
 

 
rightDiv.onscroll = function() { 
 
    if (!isSyncingRightScroll) { 
 
    isSyncingLeftScroll = true; 
 
    leftDiv.scrollTop = this.scrollTop; 
 
    } 
 
    isSyncingRightScroll = false; 
 
}

.container { 
 
    width: 200px; 
 
    height: 500px; 
 
    overflow-y: auto; 
 
} 
 

 
.leftContainer { 
 
    float: left; 
 
} 
 

 
.rightContainer { 
 
    float: right; 
 
}

<div id="left" class="container leftContainer"> 
 
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. 
 
</div> 
 
<div id="right" class="container rightContainer"> 
 
Sed ut perspiciatis, unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam eaque ipsa, quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt, explicabo. Nemo enim ipsam voluptatem, quia voluptas sit, aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos, qui ratione voluptatem sequi nesciunt, neque porro quisquam est, qui dolorem ipsum, quia dolor sit, amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt, ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit, qui in ea voluptate velit esse, quam nihil molestiae consequatur, vel illum, qui dolorem eum fugiat, quo voluptas nulla pariatur? At vero eos et accusamus et iusto odio dignissimos ducimus, qui blanditiis praesentium voluptatum deleniti atque corrupti, quos dolores et quas molestias excepturi sint, obcaecati cupiditate non provident, similique sunt in culpa, qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio, cumque nihil impedit, quo minus id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet, ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. 
 
</div>

這裏是fiddle。