Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Without a bit more code to look at, I can't really suggest changes to make directly to your code but I've managed to mock up a working version of what you're perhaps looking for with the following <a href="http://jsfiddle.net/ZCe2N/" rel="nofollow">jsFiddle</a>.</p> <p>I've also broken down the equation into parts to make it easier to see what's going on.</p> <p>So as you scroll the <code>text</code> div, the <code>photos</code> div scrolls at the same ratio depending on the height of the two containers.</p> <p>JavaScript:</p> <pre><code>$(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); }); }); </code></pre> <p>HTML:</p> <pre><code>&lt;div id="textScroll" style="width:100px; height:100px; overflow:auto;"&gt; &lt;div id="text"&gt; Text 1&lt;br /&gt; Text 2&lt;br /&gt; Text 3&lt;br /&gt; Text 4&lt;br /&gt; Text 5&lt;br /&gt; Text 6&lt;br /&gt; Text 7 &lt;/div&gt; &lt;/div&gt; &lt;div id="photosScroll" style="width:100px; height:100px; overflow:auto;"&gt; &lt;div id="photos"&gt; Photos 1&lt;br /&gt; Photos 1&lt;br /&gt; Photos 2&lt;br /&gt; Photos 2&lt;br /&gt; Photos 3&lt;br /&gt; Photos 3&lt;br /&gt; Photos 4&lt;br /&gt; Photos 4&lt;br /&gt; Photos 5&lt;br /&gt; Photos 5&lt;br /&gt; Photos 6&lt;br /&gt; Photos 6&lt;br /&gt; Photos 7&lt;br /&gt; Photos 7 &lt;/div&gt; &lt;/div&gt; </code></pre> <p>Hope it helps you solve your problem.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload