如何防止在網站上滾動，並只啓用滾動之間

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; 

}