title: vertical scrolling via scrollTo is jittery on mobile devices
body: <p>I have seen <a href="https://stackoverflow.com/questions/16755887/window-scrollto-causes-flickering-on-mobile-devices">this question</a> but it wasn't answered.</p>
  
  <p>I have a object on a webpage that I want you to be able to drag and scroll the page.  Reason behind this is that I set it up to be a swipe'able window but on some mobile devices the window takes up most of the screen.  So in addition to horizontal "swiping" I want you to be able to vertically scroll the page as well.</p>
  
  <p>This works great on a PC with a mouse.  Everything is smooth and as expected.  However, once you go to a mobile device (I have tried on Safari on an iPhone and the native browser on an Android 4 and both have the same issue) vertical scrolling is very "jittery".</p>
  
  <p>At first I thought that it had to do with the fact that after you scroll the page, the next touchmove / MSPointerMove event will return a Ycord that different even though your finger might not have moved (due to the scrolling).  But trying to accomidate for this didn't help.</p>
  
  <p>Anyway, a demo of the whole thing can be found at <a href="http://www.leecolpi.com/NEW/m/" rel="nofollow noreferrer">http://www.leecolpi.com/NEW/m/</a>
  The full javascript can be found at <a href="http://www.leecolpi.com/NEW/m/JAVASCRIPT/slide_window.js" rel="nofollow noreferrer">http://www.leecolpi.com/NEW/m/JAVASCRIPT/slide_window.js</a></p>
  
  <p>The relivant javascript is (might be easier to read via the link above):</p>
  
  <pre><code>function mouseMoveTrigger(evt)
  {
    if (!isDragging) return;
  
    if (!touchEvents &amp;&amp; !pointerEvents)
      if (window.event) evt=window.event;
  
    if (evt.preventDefault)
      evt.preventDefault();
    else
      evt.returnValue = false;
  
    var newX;
    var newY;
    if (touchEvents)
    {
      newX = offsetX - evt.changedTouches[0].pageX;
      offsetX = evt.changedTouches[0].pageX;
      newY = offsetY - evt.changedTouches[0].pageY;
      offsetY = evt.changedTouches[0].pageY;
    }
    else
    {
      newX = offsetX - evt.clientX;
      offsetX = evt.clientX;
      newY = offsetY - evt.clientY;
      offsetY = evt.clientY;
    }
  
    var thingsToSlide = document.getElementById("pictureFrame").getElementsByTagName("li");
    newX = parseInt(thingsToSlide[0].style.right.replace(/px/g,'')) + newX;
  
    if (newX &lt; 0)
      newX = 0;
    if (newX &gt; ((thingsToSlide[0].offsetWidth * (thingsToSlide.length - 1))) + 30)
      newX = (thingsToSlide[0].offsetWidth * (thingsToSlide.length - 1)) + 30;
  
    window.scrollBy(0, newY);
  
    for (var i=0; i&lt;thingsToSlide.length; i++)
      thingsToSlide[i].style.right = newX + "px";
  
    return false;
  }
  </code></pre>
  
  <p>As you can see, all I am doing is a scrollBy of the difference of the Yvalue for the current and previous "move" events.  Again, this works like a champ on a computer which is exactly where I don't care if it works or not.  Only problem is every mobile device I have tried it on.</p>
  
  <p>I am using preventDefault() (or setting the return value = false if I can't do that), but could I be triggering another event and not knowing it?  I tried with my init to only listen for certian events.  Here is my init function (might be easier to read via the link above):</p>
  
  <pre><code>function initSlider()
  {
    var pageBody = document.getElementsByTagName("body")[0];
    var thingsToSlide = document.getElementById("pictureFrame");
    if (thingsToSlide)
    {
      var thingsToSlideList = document.getElementById("pictureFrame").getElementsByTagName("li");
      for (var i=0; i&lt;thingsToSlideList.length; i++)
        thingsToSlideList[i].style.right = "0px";
  
      if (touchEvents)
      {
        thingsToSlide.addEventListener("touchstart", onTouchStart, false);
      }
      else if (pointerEvents)
      {
        thingsToSlide.addEventListener("MSPointerDown", onTouchStart, false);
      }
      else
      {
        thingsToSlide.ondrag=function() { return false; };
        thingsToSlide.onselectstart=function() { return false; };
        thingsToSlide.onmousedown=function(event) { mouseDownTrigger(this,event); };
      }
  
      if (touchEvents)
      {
        pageBody.addEventListener("touchmove", mouseMoveTrigger, false);
        pageBody.addEventListener("touchend", mouseUpTrigger, false);
        pageBody.addEventListener("touchcancle", mouseUpTrigger, false);
      }
      else if (pointerEvents)
      {
        pageBody.addEventListener("MSPointerMove", mouseMoveTrigger, false);
        pageBody.addEventListener("MSPointerUp", mouseUpTrigger, false);
        pageBody.addEventListener("MSPointerCancel", mouseUpTrigger, false);
      }
      else
      {
        document.onmousemove = mouseMoveTrigger;
        document.onmouseup = mouseUpTrigger;
      }
    }
  }
  </code></pre>
  
  <p>Any help would be greatly appreciated.  Thanks in advance</p>