title: jQuery snap after horizontal scroll
body: <p>I have a horizontal-scrolling site that is using mousewheel jQuery Plugin.  The scroll works but I want to snap each "article" to the left-side of the document so it doesn't stay half-way cut once scrolling is stopped.</p>
  
  <p>The markup I have so far:</p>
  
  <p>CSS</p>
  
  <pre><code>#viewport {
  width:100%;
  height:100%;
  overflow: hidden;
  }
  
  #stage {
  height:100%;
  width:400%;
  position: absolute;
  display:block;
  overflow: hidden;
  }
  
  #stage article {
  width:25%;
  height:100%;
  position: relative;
  display:block;
  float:left;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="viewport"&gt;
  &lt;section id="stage" class="clearfix"&gt;
  &lt;article&gt;
  This is the block that should snap to the left once scrolling is stopped.
  &lt;/article&gt;
  
  &lt;article&gt;
  This is the block that should snap to the left once scrolling is stopped.
  &lt;/article&gt;
  
  &lt;article&gt;
  This is the block that should snap to the left once scrolling is stopped.
  &lt;/article&gt;
  
  &lt;article&gt;
  This is the block that should snap to the left once scrolling is stopped.
  &lt;/article&gt;
  
  &lt;/section&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>$(function() {
  $("html, body").mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 30);
  event.preventDefault();
  });
  });
  </code></pre>
  
  <p>I tried using this script with no good results.  It seems the percentages are preventing knowing the previous/next location.</p>
  
  <p><a href="https://stackoverflow.com/a/8170667">https://stackoverflow.com/a/8170667</a></p>
  
  <p>Thanks in advance.</p>