title: How to make Syncing two Divs scroll positions smoother
body: <p>I am trying to sync two scrollable DIVS scroll positions.</p>
  
  <p>Methods followed :</p>
  
  <p><a href="http://jsfiddle.net/do0xvykc/17/" rel="nofollow">Method - 1</a> : on-scroll event setting the scrollTop of other DIV.
               problem : scroll event executed at the end and UI is sluggish in iOS safari.</p>
  
  <p><a href="http://jsfiddle.net/do0xvykc/18/" rel="nofollow">Method - 2</a> : used setInterval to sync both scroll positions.
               Problem : iOS does not execute timer functions during scroll, 
                         so scroll positions synced at the end. Again this is more sluggish. 
                         Tried, timers fix as mentioned in many blogs but still no grace.</p>
  
  <p><a href="http://jsfiddle.net/do0xvykc/6/" rel="nofollow">Method -3</a>  : Tried custom scrollbar, so iScroll and tried to sync both on <code>scroll</code> event, 
                Problem : this seems better but in iOS still it is sluggish!!! </p>
  
  <p><a href="http://jsfiddle.net/do0xvykc/7/" rel="nofollow">Method -4</a> : Tried custom scrollbar, so iScroll and tried to sync both on <code>scroll</code> event, 
                Problem : Used iScroll but using timers rather depending on onScroll event, 
                          But during touchmove, iOS is busy in providing animations 
                          rather executing required timers till touchend. 
                          Below code refers to this method. It is also sluggish.</p>
  
  <pre><code>var active = .., other = ...
  // active : active Scrolling element
  // other : Element to be in sync with active
  window.setInterval(function () {
      var y;
      if (active) {
          y = active.y;
      } else {
          return;
      }
      var percentage = -y / (active.scrollerHeight - active.wrapperHeight);
      var oscrollTop = percentage * (other.scrollerHeight - other.wrapperHeight);
      if (-other.maxScrollY &gt;= toInt(oscrollTop)) {
          other.scrollTo(0, -toInt(oscrollTop));
      }
  }, 20);
  </code></pre>
  
  <p>How can make syncing scroll positions of two scrollable DIVS smoother. Please suggest me something, it is irritating me.</p>