title: Prevent window vertical scroll, until div's horizontal scroll reaches its end
body: <p>I have a page that scrolls normal (vertically) and I'd like to have a div that scrolls horizontally on mousewheel down, then resumes vertical scrolling once the horizontal scrolling is done. Here's what I'm trying to accomplish.</p>
  
  <ul>
  <li>Page scrolls normal (vertically)</li>
  <li>Once I reach a the div #scroll, I'd like the page scrolling to stop and I'd like the content inside #scroll to scroll vertically</li>
  <li>Once I scroll to the end of #scroll, I'd like the normal page scroll (vertically) to resume. </li>
  </ul>
  
  <p>I have tried a few solutions but run in to the following problems</p>
  
  <ul>
  <li>When I horizontal the #scroll content the vertical page scroll doesn't stop</li>
  <li>When I stop the vertical scroll and get to the end of the horizontal scroll, I have to scroll like 50 times just to get out of that div.</li>
  </ul>
  
  <p>Here's what I have so far...</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var scroller = {};
  scroller.e = document.getElementById("scroll");
  
  if (scroller.e.addEventListener) {
      scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
      scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
  } else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);
  
  function MouseWheelHandler(e) {
  
      // cross-browser wheel delta
      var e = window.event || e;
      var delta = - 30 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));
  
      var pst = $('#scroll').scrollLeft() + delta;
  
      if (pst &lt; 0) {
          pst = 0;
      } else if (pst &gt; $('.box-wrap').width()) {
          pst = $('.box-wrap').width();
      }
  
      $('#scroll').scrollLeft(pst);
  
      return false;
  }
  
  
  var toolbox = $('#scroll'),
      height = toolbox.height(),
      scrollHeight = toolbox.get(0).scrollHeight;
  
  toolbox.off("mousewheel").on("mousewheel", function (event) {
    var blockScrolling = this.scrollTop === scrollHeight - height &amp;&amp; event.deltaY &lt; 0 || this.scrollTop === 0 &amp;&amp; event.deltaY &gt; 0;
    return !blockScrolling;
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrap {
    max-width: 600px;
    margin: 0 auto;
  }
  
  #scroll {
      width: 600px;
      border: 1px solid #111;
      padding: 0px;
      margin: 0px;
      overflow-x: scroll;
      overflow-y: hidden;
  }
  
  .box-wrap{
      padding: 0px;
      margin: 0px;
      height: 200px;
      width: 2040px;
  }
  
  .box {
      height: 200px;
      width: 200px;
      padding: 0px;
      background: #123;
      display: inline-block;
      color: #fff;
      font-size: 20px;
      text-align: center;
      line-height: 200px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="wrap"&gt;
  
    &lt;h1&gt;asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk&lt;/h1&gt;
  
    &lt;div id="scroll"&gt;
      &lt;div class="box-wrap"&gt;
        &lt;div class="box"&gt;1&lt;/div&gt;
        &lt;div class="box"&gt;2&lt;/div&gt;
        &lt;div class="box"&gt;3&lt;/div&gt;
        &lt;div class="box"&gt;4&lt;/div&gt;
        &lt;div class="box"&gt;5&lt;/div&gt;
        &lt;div class="box"&gt;6&lt;/div&gt;
        &lt;div class="box"&gt;7&lt;/div&gt;
        &lt;div class="box"&gt;8&lt;/div&gt;
        &lt;div class="box"&gt;9&lt;/div&gt;
        &lt;div class="box"&gt;10&lt;/div&gt;     
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;h1&gt;asl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdkasl fjas fhljksa flkjsahf kjsah fkjlsa fkjshf kljsha fkljhs kjfhas kljfh sakjfhas fsdk&lt;/h1&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem with this solution is that the vertical page scroll doesn't stop when I get to the horizontal scroll section.</p>
  
  <p>Does anyone have any suggestions on how to accomplish what I want? If I'm not explaining this right please let me know.</p>
  
  <p>Thanks!</p>