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*：

我使用“标志”来了解滚动事件是否已被触发（意味着animate()当前正在运行）
我还使用“标志”来记住用户实际看到的部分（而不是计算位置）;
我修改了部分位置的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之间滚动

1 个答案: