title: disable horizontal scroll for mobile
body: <p>i wish to disable the vertical scroll for mobile devices. using :</p>
  
  <pre><code>body {overflow-x:hidden}
  </code></pre>
  
  <p>works for normal browsers but on mobile if there's an element wider than the screen it will allow side scrolling.</p>
  
  <p>i have tried using this code:</p>
  
  <pre><code>jQuery(document).ready(function($) {
      var $body = $(document);
      $body.bind('scroll', function() {
          // "Disable" the horizontal scroll.
          if ($body.scrollLeft() !== 0) {
              $body.scrollLeft(0);
          }
      });
  });
  </code></pre>
  
  <p>but it allows the side scrolling (on mobile) but "jumps" the scroll back to the right, this is not a perfect solution.</p>
  
  <p>i have tried using this:</p>
  
  <pre><code>    &lt;meta name="viewport" content=" width=device-width; initial-scale=1.0; user-scalable=0;" /&gt; 
   $(document).bind("touchmove",function(event){
              event.preventDefault();
        });
  </code></pre>
  
  <p>this works perfect and disable the mobile scrolling totally, the problem is that it is disabling both horizontal and vertical scrolling (i wish to disable only the horizontal).</p>