title: jQuery ScrollTo plugin - horizontal scrolling
body: <p>I hope this is an appropriate question to post here. It's more a theory question rather than a specific coding problem.</p>
  
  <p>I'm using the <strong><a href="https://github.com/flesler/jquery.scrollTo" rel="nofollow">scrollTo plugin</a></strong> by Ariel Flesler to create a horizontal scrolling webpage. All good, I've managed to download a working demo from a <a href="http://www.arvindandrion.com/2009/09/horizontal-scroll-using-jquery-scrollto/" rel="nofollow">tutorial site</a> ... except I don't understand the theory behind horizontal scrolling.</p>
  
  <p>In particular, most of the tutorials I've come across (as well as answers here on StackOverflow) suggest creating a HTML wrapper element which seems to act as a 'viewport' and scrolling the content within the wrapper (nested  tags for example) using scrollTo plugin.</p>
  
  <p>Why can't I just position some  tags off-screen (say, 3000px to the right) and use scrollTo to horizontally scroll to these  tags?</p>
  
  <p>I tried this and it works but I can't achieve a smooth scroll with easing (see code below).</p>
  
  <p>Would appreciate it if someone could give me some insight into this.</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
  &lt;title&gt;scrollTo Test&lt;/title&gt;
  
  &lt;style&gt;
  
  #box {
     width:100px;
     height:100px;
     background-color:#F00;
     position:relative;
     top:0;
     left:3000px;
  }
  
  &lt;/style&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;nav&gt;
     &lt;a href="#"&gt;CLICK&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div id="box"&gt;BOX&lt;/div&gt;
  
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.scrollTo.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/jquery.easing.1.3.js" type="text/javascript"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  
  $('nav a').on("click", function () {
  
      //$.scrollTo( '#box', {top:0 , left:800}, {easing:'easeOutElastic'} );
      $.scrollTo( '#box', 800, {easing:'easeOutElastic', axis:'x'} ); 
  
  });
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>UPDATE:
  I created a JSFiddle at: <a href="http://jsfiddle.net/wzd8202a/" rel="nofollow">http://jsfiddle.net/wzd8202a/</a></p>