title: Preventing horizontal scrolling on mobile (HTML/CSS/JS)
body: <p>I'm putting the finishing touches on <a href="http://jewelry-site.appspot.com/" rel="nofollow">this parallax website</a> but I'm having trouble preventing some very unattractive horizontal scrolling effects (try it yourself on a touch device by dragging directly to the left).</p>
  
  <p>I've adapted the parallax technique described <a href="http://keithclark.co.uk/articles/pure-css-parallax-websites/" rel="nofollow">here</a> using 3D CSS transforms. Unfortunately, one of the side-effects seems to be that <strong>the browser thinks the images are wider than the viewport, even though they aren't</strong>. I've already tried:</p>
  
  <ul>
  <li>Adding <code>overflow-x: hidden;</code> to the parallax images' containing div, and while that's hidden the horizontal scrollbar, it alone does not actually prevent horizontal scrolling.</li>
  <li>Adding a partial workaround <code>scroll</code> event listener to reset the <code>scrollLeft</code> of the container back to 0 with each scroll, which solves the problem entirely on desktop (AFAICT) and partly on mobile (at least when scrolling diagonally).</li>
  </ul>
  
  <p>Unfortunately, it seems that, at least on Android (I don't have an iPhone to test) it's still possible to scroll horizontally without triggering the <code>scroll</code> event workaround. Even more mystifying, while it's in this weird horizontally-scrolled mode I've programmatically traversed the entire DOM and not a single element has a <code>scrollLeft</code> property <code>!= 0</code>. I've also called <code>$('*').scrollLeft(0);</code> from the console and it doesn't reset the scrolling. Now calling <code>.preventDefault()</code> on all <code>touchmove</code> events <em>does</em> prevent the horizontal scrolling, but it also effectively breaks the site as a whole since it prevents vertical scrolling too--so that's a no-go.</p>
  
  <p><strong>So how is this thing scrolling horizontally if nothing has a <code>scrollLeft</code> other than <code>0</code>, and how can I prevent/workaround this scrolling behavior?</strong></p>