title: overflow-x to avoid any horizontal scrolling in browser
body: <p><strong>PROBLEM RESOLVED</strong>
  SO I have this issue that I cannot for the life figure out:</p>
  
  <p>I made a dropdown to be shown on the whole page no matter what size and this seems to work:</p>
  
  <p><a href="http://jsfiddle.net/Riskbreaker/y9wZz/" rel="nofollow noreferrer">http://jsfiddle.net/Riskbreaker/y9wZz/</a></p>
  
  <p>The problem is if you force your mouse to the right it scrolls unwanted scrolling and obviously this is the root of all evil:</p>
  
  <pre><code>.dd {
      margin: 0 -1000em;
      padding: 0 1000em;
      position: absolute;
      top: 100%;
      visibility: hidden;
  }
  </code></pre>
  
  <p>I tried this: </p>
  
  <pre><code>body {overflow-x: hidden;}
  </code></pre>
  
  <p><em>(Note I tried HTML overflow-x too)</em>.....<strong>of course it removes the scrollbar(horizontal)</strong> but thats not the issue....FF listens and does not scroll at all if you tried to force it BUT, the rest...Chrome/IE/Safari do scroll....Is there a solution to make this work?</p>
  
  <p>This person had something similar but no answer here:
  <a href="https://stackoverflow.com/questions/8635799/overflow-xhidden-still-can-scroll">overflow-x:hidden still can scroll</a></p>
  
  <p>Lastly I tried this:</p>
  
  <pre><code>$(element).scroll(function () {
      this.scrollLeft = 0;
  });
  </code></pre>
  
  <p>but didnt do anything.</p>
  
  <p><strong>SOLUTION</strong>
  I just needed to add this on html:
  <code>html {overflow: hidden; overflow-y: auto;}</code>...thanks all</p>