How to prevent scrolling on website and only enable scrolling between divs

Question

I have been trying to disable the scroll on the website and make it possible to only scroll between different sections(divs).

The scroll really is enabled and sometimes it does scroll to a position the way I want...
But sometimes it does not (even if the scroll event is recognized and in the right part of JS).

https://jsfiddle.net/reeferblower/bktonrf7/

You can see that it works 2-3 times and then it is very laggy and unresponsive.

$('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 >= 0) {
    //up scroll
    console.log("up...");
    //section 2
    if(pos == 0){
      return;
    }
    if(pos > section1Top && pos < section3Top ){
      console.log("2 - 1 ");

      $('html, body').animate({
        scrollTop:0
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
      });
    }

    //section 3
    else if(pos >= section2Top && pos < 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 >= section1Top && pos < 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;

}

Answer 1

The most important "trick" is to filter those scroll events which fires way too often for the animate() method.

If you don't, the animation stack fills with too many animations... This is what is causing the lag.

So I updated your **Fiddle* in this way:

1. I used a "flag" to know if a scroll event is already fired (Meaning that an animate() is currently running)
2. I also used a "flag" to remember which section the user is actually seeing (instead of calculating the position);
3. I fixed the sectionXTop variables for sections position to scroll to.

Here is the code:

var actualSection=1;
var scrollFired=false;

$('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 >= 0) {
    //up scroll
    console.log("up...");
    //section 2
    if(actualSection==1){
      return;
    }
    if(actualSection==2 && !scrollFired){
      scrollFired=true;
      console.log("UP to section #1");

      $('html, body').animate({
        scrollTop:0
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
        actualSection=1;
        scrollFired=false;
      });
    }

    //section 3
    else if(actualSection==3 && !scrollFired){
      scrollFired=true;
      console.log("UP to section #2");

      $('html, body').animate({
        scrollTop:$('#page-number-2').offset().top
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
        actualSection=2;
        scrollFired=false;
      });
    }
    else if(actualSection==4 && !scrollFired){
      scrollFired=true;
      console.log("UP to section #3");

      $('html, body').animate({
        scrollTop:$('#page-number-3').offset().top
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
        actualSection=3;
        scrollFired=false;
      });
    }

  }
  else {
    //down scroll
    console.log("down");

    //section 1
    if(actualSection==1 && !scrollFired){
      scrollFired=true;
      console.log("Down to section #2");

      $('html, body').animate({
        scrollTop:$('#page-number-2').offset().top
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
        actualSection=2;
        scrollFired=false;
      });
    }
    // section 2
    else if(actualSection==2 && !scrollFired){
      scrollFired=true;
      console.log("Down to section #3");

      $('html, body').animate({
        scrollTop:$('#page-number-3').offset().top
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
        actualSection=3;
        scrollFired=false;
      });
    }
    //section 4
    else if(actualSection==3 && !scrollFired){
      scrollFired=true;
      console.log("Down to section #4");

      $('html, body').animate({
        scrollTop:$('#page-number-4').offset().top
      }, 1000, function() {
        // parallaxScroll(); // Callback is required for iOS
        actualSection=4;
        scrollFired=false;
      });
    }
  }
  return false;

}