Databases
StackOverflow2013
Postsdbo
POHow to synchronize scroll between two elements with different height
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to synchronize scroll between two elements with different height
    text
    copied!<p>I have two DIV elements <code>#page</code> and <code>#block</code> :</p> <pre><code>&lt;div id="page"&gt;&lt;/div&gt; &lt;div id="block"&gt;&lt;/div&gt; </code></pre> <p><code>#block</code> element has fixed position and long content inside with <code>overflow:hidden</code> property.</p> <p><code>#page</code> element has some content inside too, but it height of <code>#page</code> will be longer or shorter then <code>#block</code> height.</p> <p>My goal is to achieve synchronized scroll between this two elements. Something like this: </p> <p><img src="https://i.stack.imgur.com/51zdM.gif" alt="enter image description here"></p> <p>I need to calculate speed of <code>#block</code> element scroll, because header and footer elements of <code>#page</code> and <code>#block</code> should be at same position from beginning and at the end of scroll.</p> <p><strong>The way I tried to achieve this:</strong></p> <ul> <li>Calculated height of <code>#page</code> element</li> <li>Calculated height of <code>#block</code> element content (because block element is fixed and has alwas fixed height)</li> <li><p>Calculated <code>#block</code> element scroll speed by: </p> <p><code>$("#block").outerHeight / $("#page").outerHeight</code></p></li> <li><p>Triggered <code>.scrollTop()</code> of <code>#block</code> </p></li> </ul> <p>It's working from the beginning and <code>#block</code> element scroll is faster then <code>#page</code> element scroll, but at the end, <code>#block</code> is not scrolled fully.</p> <p>Here is my JsFiddle: <a href="http://jsfiddle.net/zur4ik/bQYrf/2/" rel="noreferrer">http://jsfiddle.net/zur4ik/bQYrf/2/</a></p> <p>Maybe anyone can see what I'm doing wrong?</p> <p>Thanks in advance.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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