मैं एक अलग गति पर कॉलम कैसे स्क्रॉल करूं?

Question

मेरे पास दो कॉलम हैं, #photos और #text। मेरा #photos कॉलम लंबा है और तार्किक रूप से कुछ छवियां रखता है। जब मैं पृष्ठ को स्क्रॉल करता हूं, तो मुझे #photos कॉलम #text कॉलम से तेज़ स्क्रॉल करने के लिए पसंद है, ताकि दोनों कॉलम नीचे पर संरेखित हों।

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

मैं targetY गणना कैसे करते हैं:

मैं #photos स्तंभ को अद्यतन करने के लिए उपयोग jQuery के $(window).scroll()?

मुझे पता है कि शायद $(document).height(), $("#photos").height() और $(window).scrollTop() के साथ कुछ करना है, लेकिन मैं सूत्र को नहीं समझ सकता।

Answer 1

देखने के लिए थोड़ा और कोड के बिना, मैं वास्तव में सीधे आपके कोड में बदलाव करने के लिए परिवर्तनों का सुझाव नहीं दे सकता हूं, लेकिन मैं शायद jsFiddle के साथ जो कुछ ढूंढ रहा हूं उसके एक वर्किंग वर्जन को नकल करने में कामयाब रहा हूं।

मैंने कुछ हिस्सों में समीकरण को तोड़ दिया है ताकि यह देखने में आसान हो कि क्या हो रहा है।

इसलिए जब आप text div को स्क्रॉल करते हैं, तो photos दो कंटेनरों की ऊंचाई के आधार पर उसी अनुपात में div scrolls।

जावास्क्रिप्ट:

$(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> 

आशा है कि यह आप अपनी समस्या को हल मदद करता है।