title: How to prevent scrolling on website and only enable scrolling between divs
body: <p>I have been trying to disable the scroll on the website and make it possible to only scroll between different sections(divs).</p>
  
  <p>The scroll really is enabled and sometimes it does scroll to a position the way I want...<br>
  But sometimes it does not (even if the scroll event is recognized and in the right part of JS).</p>
  
  <p><a href="https://jsfiddle.net/reeferblower/bktonrf7/" rel="nofollow noreferrer">https://jsfiddle.net/reeferblower/bktonrf7/</a></p>
  
  <p><strong>You can see that it works 2-3 times and then it is very laggy and unresponsive.</strong></p>
  
  <pre><code>$('body').on('scroll touchmove mousewheel', function(e) {
    e.preventDefault();
    e.stopPropagation();
  
    fullPage(e);
  
  });
  
  
  
  function fullPage (e) {
  
    var section1Top =  0;
    var section2Top =  $('#page-number-2').offset().top - (($('#page-number-3').offset().top - $('#page-number-2').offset().top) / 2);
    var section3Top =  $('#page-number-3').offset().top - (($('#page-number-4').offset().top - $('#page-number-3').offset().top) / 2);
    var section4Top =  $('#page-number-4').offset().top - (($(document).height() - $('#page-number-4').offset().top) / 2);;
    var pos = $(window).scrollTop();
    console.log(pos);
    if (e.originalEvent.wheelDelta &gt;= 0) {
      //up scroll
      console.log("up...");
      //section 2
      if(pos == 0){
        return;
      }
      if(pos &gt; section1Top &amp;&amp; pos &lt; section3Top ){
        console.log("2 - 1 ");
  
        $('html, body').animate({
          scrollTop:0
        }, 1000, function() {
          // parallaxScroll(); // Callback is required for iOS
        });
      }
  
      //section 3
      else if(pos &gt;= section2Top &amp;&amp; pos &lt; section4Top ){
        console.log("3 - 2 ");
  
        $('html, body').animate({
          scrollTop:$('#page-number-2').offset().top
        }, 1000);
      }
      else{
        console.log("4 - 3 ");
        $('html, body').animate({
          scrollTop:$('#page-number-3').offset().top
        }, 1000);
      }
  
    }
    else {
      //down scroll
      console.log("down");
  
      //section 1
      if(pos == '0'){
        console.log("1 - 2 ");
        $('html, body').animate({
          scrollTop:$('#page-number-2').offset().top
        }, 1000);
      }
      // section 2
      else if(pos &gt;= section1Top &amp;&amp; pos &lt; section3Top ){
        console.log("2 - 3 ");
        $('html, body').animate({
          scrollTop:$('#page-number-3').offset().top
        }, 1000);
      }
      //section 4
      else {
        console.log("3 - 4 ");
        $('html, body').animate({
          scrollTop:$('#page-number-4').offset().top
        }, 1000);
      }
    }
    return false;
  
  }
  </code></pre>