title: How to stop browser auto scrolling containers on focus changes
body: <p>As you tab between input fields in a browser, the browser will automatically scroll the nearest parent container to place the next focused field within the view.</p>
  
  <h2>Simple JSFiddle: <a href="http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/" rel="noreferrer">http://jsfiddle.net/TrueBlueAussie/pxyXZ/1/</a></h2>
  
  <pre><code>$('.section').eq(6).find('input').focus();
  </code></pre>
  
  <p>For example if you open the above fiddle it selects "Sample item 7" at the bottom of the yellow window. If you press tab the "Sample text 8" field jumps up towards the middle of the parent window. </p>
  
  <p>Obviously this is a great thing for normal websites, but I have a custom scrolling container in which I position &amp; scroll everything manually. I am tracking focus changes and will use a momentum scroller to bring it into view, but <strong>how do I disable the default scrolling behavior of web-browsers?</strong> Happy to accept CSS, Javascript or JQuery solutions.</p>