Làm cách nào để cuộn một cột ở tốc độ khác?

Question

Tôi có hai cột, #photos và #text. Cột #photos của tôi dài hơn và hợp lý giữ một số hình ảnh. Khi tôi cuộn trang, tôi thích cột #photos để cuộn nhanh hơn cột #text, sao cho cả hai cột căn chỉnh ở dưới cùng.

tôi sử dụng jQuery $(window).scroll() để cập nhật các #photos cột:

$("#photos").css("top", Math.round(targetY)); 

Làm thế nào để tính toán targetY?

Tôi biết điều này có thể liên quan đến $(document).height(), $("#photos").height() và $(window).scrollTop(), nhưng tôi không thể tìm ra công thức.

Answer 1

Không cần thêm chút mã để xem, tôi thực sự không thể đề xuất các thay đổi trực tiếp cho mã của bạn nhưng tôi đã cố gắng tạo ra phiên bản hoạt động của những gì bạn đang tìm kiếm với jsFiddle sau.

Tôi cũng đã chia phương trình thành các phần để dễ dàng hơn để xem những gì đang diễn ra.

Vì vậy, khi bạn cuộn các div text, các cuộn div photos div ở cùng một tỷ lệ tùy thuộc vào chiều cao của hai vùng chứa.

JavaScript:

$(document).ready(function(){ 
    $('#textScroll').scroll(function(){ 
     var textDiff = $('#text').height() - $('#textScroll').height(); 
     var textDiffRatio = (1/textDiff) * $('#textScroll').scrollTop(); 
     var photosDiff = $('#photos').height() - $('#photosScroll').height(); 
     var photosScrollTop = textDiffRatio * photosDiff; 
     $('#photosScroll').scrollTop(photosScrollTop); 
    }); 
}); 

HTML:

<div id="textScroll" style="width:100px; height:100px; overflow:auto;"> 
    <div id="text"> 
     Text 1<br /> 
     Text 2<br /> 
     Text 3<br /> 
     Text 4<br /> 
     Text 5<br /> 
     Text 6<br /> 
     Text 7 
    </div> 
</div> 
<div id="photosScroll" style="width:100px; height:100px; overflow:auto;">  
    <div id="photos"> 
     Photos 1<br /> 
     Photos 1<br /> 
     Photos 2<br /> 
     Photos 2<br /> 
     Photos 3<br /> 
     Photos 3<br /> 
     Photos 4<br /> 
     Photos 4<br /> 
     Photos 5<br /> 
     Photos 5<br /> 
     Photos 6<br /> 
     Photos 6<br /> 
     Photos 7<br /> 
     Photos 7 
    </div> 
</div> 

Hy vọng nó giúp bạn giải quyết vấn đề của bạn.