title: force stop scrolling on reaching the end of a scrollspy section
body: <p><a href="http://jsfiddle.net/panchroma/rWYQu/" rel="nofollow">here is a fiddle to know where I am starting from</a></p>
  
  <p>The problem I am looking to solve involves "paginating" content of a single html file, in such a way that locks them into a single section at a time. I want it so that when users scroll to the bottom of a section, it will slide up a prompt to move to the next page, which will <a href="http://tympanus.net/Development/PageTransitions/" rel="nofollow">fire a transition, such as different easing/from bottom</a> and put them "in" the next section. </p>
  
  <p>This would be repeated in the next section; when they scroll to the top, they will get a "previous" button but be unable to move unless they click "previous". If they hit the bottom, they will be unable to move to the next page without clicking "next". If they click a section tab, it would do the transition and bring them to that page from their current</p>
  
  <p>I know that this will stop scrolling, but how do I modify it such that it will prevent scrolling <em>in this way</em>?</p>
  
  <pre><code>$('body').on({
  'mousewheel': function(e) {
      if (e.target.id == 'el') return;
      e.preventDefault();
      e.stopPropagation();
      }
  })
  </code></pre>