如何防止在网站上滚动并仅启用 div 之间的滚动

Question

我一直在尝试禁用网站上的滚动，使其只能在不同部分（div）之间滚动。

滚动确实已启用，有时它会滚动到我想要的位置...
但有时它不会（即使滚动事件被识别并且在 JS 的右侧）。

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

您可以看到它工作了 2-3 次，然后它非常滞后且反应迟钝。

$('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

最重要的“技巧”是过滤那些对于animate() 方法来说过于频繁触发的滚动事件。

如果不这样做，动画堆栈会填充太多动画...这就是导致延迟的原因。

所以我这样updated your **Fiddle*：

1. 我使用“标志”来了解是否已经触发了滚动事件（意味着 animate() 当前正在运行）
2. 我还使用“标志”来记住用户实际看到的是哪个部分（而不是计算位置）；
3. 我修复了要滚动到的部分位置的 sectionXTop 变量。

代码如下：

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;

}