如何防止在网站上滚动，并只启用滚动之间

Question

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

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

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

你可以看到，它的工作原理2-3次，那么它是非常laggy，反应迟钝。

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

}