Javascript 如何防止在网站上滚动，并且只允许在div之间滚动

我一直在尝试禁用网站上的滚动，并使之能够只在不同的部分之间滚动

滚动真的是启用，有时它确实滚动到我想要的位置。。。 但有时，即使scroll事件被识别并位于JS的右侧，它也无法识别

你可以看到它工作2-3次，然后它是非常滞后和无反应的

最重要的技巧是过滤那些对于动画方法来说太频繁触发的滚动事件

如果不这样做，动画堆栈将填充太多的动画。。。这就是造成滞后的原因

所以我这样说：

我使用了一个标志来知道是否已经触发了滚动事件，这意味着动画当前正在运行 我还使用了一个标志来记住用户实际看到的部分，而不是计算位置； 我修正了sectionXTop变量，使sections position可以滚动到。 代码如下：

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;

}

---

尝试$window vs$'body'也可以，一旦进入第4页，就无法返回，上一个链接失败，回滚也不起作用。

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;

}