如何臨時鎖定長長的單個網頁上的滾動

Question

我想創建一個長單個網頁，並在用戶滾動時以明顯的「鎖定」感覺突出顯示網頁的各個部分。當該部分到達頂部並佔據整個顯示屏時，它應該禁用滾動，然後當用戶再次滾動時，它應該釋放並允許它們繼續到下一部分，然後再次重複鎖定。

我環顧四周，找不到我在找什麼。

任何意見的解決方案或方法，將不勝感激。謝謝！

Answer 1

好的。我會爲身體這樣做overflow: hidden;：

$(function() { 
 
    $(window).scroll(function() { 
 
    if ($(window).scrollTop() > 500 && $(window).scrollTop() < 750) 
 
     $("body").addClass("ovh"); 
 
    }); 
 
    $("a").click(function() { 
 
    $(".ovh").removeClass("ovh"); 
 
    return false; 
 
    }); 
 
});

* {font: 10pt 'Segoe UI';} 
 
.ovh {overflow: hidden;} 
 
p.middle {margin-top: 750px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<p>Body stops scrolling when the next text comes in.</p> 
 
<p class="middle">Body stops scrolling here. <a href="#">Click</a> to release.</p> 
 
<p class="middle">Some space</p>

Answer 2

瀏覽器的默認行爲是滾動。爲了防止這種情況，你可以使用jQuery的preventDefault。

$(document).on("scroll touchmove mousewheel", function(event) { 
    event.preventDefault(); 
    event.stopPropogation(); 
    return false; 
}); 

$(document.body).on("keypress", function(event) { 
    if (event.which === 34 || event.which === 41) { 
     event.preventDefault(); 
     return false; 
    } 
});