title: Making horizontal scroll to stop once div ended
body: <p>I'm trying to create a one page which has three sections. the second one needs to be scroll horizontally (e.g a products line) and then go back to vertically scroll.</p>
  
  <p>I have it pretty much completed with pure JS but I'm unable to continue scrolling vertical after the second div is at the end. The this section cannot be reached.</p>
  
  <p>Here is my Code Pen:<a href="https://codepen.io/yakir-mordehay/pen/XyKEgr" rel="nofollow noreferrer">https://codepen.io/yakir-mordehay/pen/XyKEgr</a></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>(function() {
    function scrollHorizontally(e) {
      e = window.event || e;
      var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
      document.getElementById('test').scrollLeft -= (delta * 40); // Multiplied by 40
      e.preventDefault();
  
      if ((delta &gt; 0 &amp;&amp; document.getElementById('test').scrollLeft &gt; 0) || (delta &lt; 0 &amp;&amp; document.getElementById('test').offsetWidth + document.getElementById('test').scrollLeft &lt; e.scrollWidth)) {
  
      }
  
    }
    if (document.getElementById('test').addEventListener) {
      // IE9, Chrome, Safari, Opera
      document.getElementById('test').addEventListener("mousewheel", scrollHorizontally, false);
      // Firefox
      document.getElementById('test').addEventListener("DOMMouseScroll", scrollHorizontally, false);
    } else {
      // IE 6/7/8
      document.getElementById('test').attachEvent("onmousewheel", scrollHorizontally);
    }
  })();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
  }
  
  html,
  body {
    height: 100%;
  }
  
  .wrapper {
    height: 100%;
    background-color: gray;
  }
  
  .view {
    height: 100%;
    background-color: lawngreen;
  }
  
  .sContainer {
    height: 100%;
    white-space: nowrap;
    overflow-x: auto;
  }
  
  .hPage {
    display: inline-block;
    height: 100%;
    width: 100%;
    background-color: blue;
    font-size: 40px;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;/script&gt;
  &lt;div class="wrapper"&gt;
    &lt;div class="view"&gt;Home&lt;/div&gt;
    &lt;div class="sContainer" id="test"&gt;
      &lt;div class="hPage"&gt; view1&lt;/div&gt;
      &lt;div class="hPage"&gt; view2&lt;/div&gt;
      &lt;div class="hPage"&gt; view3&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="view"&gt;END&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I tried to implement something like this in the JS:</p>
  
  <pre><code>if((delta &gt; 0 &amp;&amp; document.getElementById('test').scrollLeft &gt; 0) || (delta &lt; 0 &amp;&amp; document.getElementById('test').offsetWidth+document.getElementById('test').scrollLeft &lt; e.scrollWidth)) {
      e.preventDefault();
  }
  </code></pre>
  
  <p>But it not working so great. It just scrolling both vertical and horizontal together.</p>
  
  <p>Any ideas?</p>