Làm cách nào để đồng bộ hóa vị trí cuộn của hai div?

Question

Tôi muốn có 2 div có kích thước theo chiều rộng cụ thể (nghĩa là 500px). Một ở trên căn chỉnh theo chiều ngang khác.

Hộp trên cùng sẽ ẩn thanh cuộn, phía dưới sẽ hiển thị thanh cuộn và khi người dùng cuộn tôi muốn phần bù của hộp trên cùng thay đổi thành giá trị của hộp dưới cùng. Vì vậy, khi DIV ở dưới cuộn theo chiều ngang, dường như DIV hàng đầu cũng đang cuộn đồng loạt.

Tôi rất sẵn lòng làm điều này trong Jquery nếu nó giúp quá trình dễ dàng hơn.

Answer 1

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

Ở đây chúng ta đang sử dụng .scrollTop() cho tất cả nó có giá trị, nhận được giá trị scrollTop từ các phần tử với cuộn quán bar, và thiết lập các scrollTop cho các phần tử khác để đồng bộ hóa các vị trí cuộn của họ: http://api.jquery.com/scrollTop

này giả định phần tử dưới cùng của bạn có ID là bottom và phần tử trên cùng của bạn có ID là top.

Bạn có thể ẩn các cuộn thanh cho top yếu tố sử dụng CSS:

#top { 
    overflow : hidden; 
} 

Đây là một bản demo: http://jsfiddle.net/sgcer/1884/

Tôi cho rằng tôi chưa bao giờ thực sự đã có một lý do để làm điều này, nhưng có vẻ khá thú vị trong hành động.

Answer 2

Tôi đã tìm kiếm một giải pháp hướng đôi và nhờ tất cả các bạn, contibutions bạn đã giúp tôi làm điều này:

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

Xem trên JSFiddle: https://jsfiddle.net/sgcer/1274/

Hy vọng nó giúp một ai đó một ngày nào đó: -)

Answer 3

Tôi biết đây là một chủ đề cũ, nhưng có lẽ điều này sẽ giúp ai đó. Trong trường hợp nếu bạn cần đồng bộ cuộn theo hướng kép, không đủ để xử lý cả sự kiện cuộn của cả hai vùng chứa và đặt giá trị cuộn, vì sau đó cuộn sự kiện đang đi vào chu kỳ và cuộn không trơn tru (cố gắng cuộn theo chiều dọc) bởi một bánh xe chuột một ví dụ được đưa ra bởi Hightom).

Dưới đây là một ví dụ về cách bạn có thể kiểm tra xem bạn đã đồng bộ hóa các cuộn:

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>

Đây là fiddle.