title: How to push an element outside the screen without the browser just expanding the viewport?
body: <p>Some times it's nice to be able to slide things out of the viewport to hide them, for example when making hide-able sidebars or panels. But when I push something past the right or bottom edge of the window, the browser (Chrome in my case) automatically adds scrollbars to it. The user can now scroll over to the element I tried to hide. (<a href="http://jsfiddle.net/Codemonkey/3dLTT/2">JSFiddle Example</a>)</p>
  
  <p>I can remove the scrollbars by setting <code>overflow-x: hidden</code> on the body element, but that opens up a bunch of other side effects. For instance, the user can still accidentally click&amp;drag their way past the edge of the screen. The user now sees the "hidden" element and may also be stuck if they don't know how browsers work. (<a href="http://jsfiddle.net/Codemonkey/3dLTT/1">JSFiddle example</a>)</p>
  
  <p>How can I achieve this "disappear off the screen" effect without experiencing these drawbacks?</p>