title: javascript how to create fluid drag and scroll
body: <p>I want to create a drag and scroll effect:</p>
  
  <pre><code>-&gt; mouse down
  -&gt; drag and mouse move
  -&gt; the window will scroll according to the amount of mouse move
  -&gt; mouse up
  -&gt; scroll stops
  </code></pre>
  
  <p>Now, the problem I have is when I drag and move, the window DOM elements will shake.</p>
  
  <p>I added a offset check, it mitigates the shaking problem, however not solved.</p>
  
  <p>Can anyone help me?</p>
  
  <p>below is the main code and the full working jsFiddle is at: <a href="http://jsfiddle.net/mifeng/sGvA4/1/" rel="nofollow">http://jsfiddle.net/mifeng/sGvA4/1/</a></p>
  
  <pre><code>container.mousedown(function(e) {
  
      mouseX = e.pageX;
      mouseY = e.pageY;
  
      console.log("CON: " + conX + "," + conY);
      console.log("DOWN: " + mouseX + "," + mouseY);
  
      container.mousemove(function(e) {
          //console.log("INNER-DOWN: " + mouseX + "," + mouseY);
  
          offsetX = e.pageX - mouseX;
          offsetY = e.pageY - mouseY;
  
          // offset check
          if (offsetX &gt; 10 || offsetX &lt; -10 || offsetY &gt; 10 || offsetY &lt; -10) {
              conX -= offsetX;
              conY -= offsetY;
  
              window.scrollTo(conX, conY); // scrollTo
  
              mouseX = e.pageX;
              mouseY = e.pageY;
          }
      });
  });
  </code></pre>