title: JQuery: How to sync scrollbars
body: <p>How do I sync two horizontal scrollbars if I am using two frames or iframes? Thanks!</p>
  
  <pre><code>&lt;SCRIPT language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"&gt;&lt;/SCRIPT&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>$(document).ready(function()
  {
  $("#div1").scroll(function () { 
      $("#div2").scrollTop($("#div1").scrollTop());
      $("#div2").scrollLeft($("#div1").scrollLeft());
  });
  $("#div2").scroll(function () { 
      $("#div1").scrollTop($("#div2").scrollTop());
      $("#div1").scrollLeft($("#div2").scrollLeft());
  });
  
  });
  </code></pre>
  
  <p></p>
  
  <pre><code>            &lt;iframe id="div1" SRC="UserQueue_Header.asp?Occasion=&lt;%=Occasion%&gt;&amp;GPL=&lt;%=GPL%&gt;" NAME="UserQueue_Header" width=100%&gt;
                  &lt;p&gt;Your browser does not support iframes.&lt;/p&gt;
              &lt;/iframe&gt;
  
              &lt;iframe id="div2" SRC="UserQueue_Detail.asp?Occasion=&lt;%=Occasion%&gt;&amp;GPL=&lt;%=GPL%&gt;" NAME="UserQueue_Detail" width=100%&gt;
              &lt;/iframe&gt;
  </code></pre>