title: How to set max scroll position?
body: <p>Let's say that we have body width of page set to 2000px with content centered horizontally inside of body with width set to 1200px.</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="content"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>body {
      width: 2000px;
  }
  .content {
      position: relative;
      width: 1200px;
      margin-left: auto;
      margin-right: auto;
  }
  </code></pre>
  
  <p>What I am trying to achieve is that I do not allow horizontal scrolling at all until your 
  window size is 1200px or less (on resize) with setting overflow-x to hidden.</p>
  
  <pre><code>$(function() {
      $(window).resize(function() {
          if(window.innerWidth &gt; 1200) {
              $("body").css({
                  "overflow-x": "hidden"
              });
          } else {
              $("body").css({
                  "overflow-x": "visible"
              });
          }
      });
  });
  </code></pre>
  
  <p>which works fine. But I also want to prevent user from scrolling further than 1200px if his window width is less than 1200px (problem here is that as soon as the window width is less than 1200px, it is possible to scroll to full width - 2000px).</p>
  
  <p>So how would you solve this? </p>