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

Question

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

确实启用了滚动功能，有时它会按我想要的方式滚动到某个位置...
但有时它不会（即使滚动事件被识别并且在 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

最重要的 "trick" 是过滤掉那些对于 animate() 方法触发过于频繁的滚动事件。

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

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

我使用 "flag" 来了解滚动事件是否已经触发（这意味着 animate() 当前是运行）
我还使用了 "flag" 来记住用户实际看到的部分（而不是计算位置）；
我修复了要滚动到的部分位置的 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;

}

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

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

html

javascript

jquery

scroll

scrolltop