在滾動，滾動100vh向下/向上作品一旦

Question

我想處理滾動，當我向下滾動我要滾動全viewport.height和高達相同的，但相反的方式：

它正在與此，但它僅適用於工作一次向下滾動和備份一次（也有一段時間了，而我不能滾動，如果我去向下和向上一段時間後，IG下降，等待，然後再次向上）：

function viewport() { 
 
    var e = window, a = 'inner'; 
 
    if (!('innerWidth' in window)) { 
 
     a = 'client'; 
 
     e = document.documentElement || document.body; 
 
    } 
 
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] }; 
 
} 
 
var height = viewport().height; 
 
$(document).on('wheel', function(e) { 
 
    var delta = e.originalEvent.deltaY; 
 
    if(delta > 0) $('html, body').animate({scrollTop: height+'px'}); 
 
    else $('html, body').animate({scrollTop: '-'+height+'px'}); 
 
    return false; 
 
    });

body{min-height: 300vh; overflow: auto;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 1

問題是因爲y您需要將scrollTop從當前位置增加或減少。您當前的代碼只會將其重複設置爲單個值，因此沒有任何內容會發生變化。

要解決此問題，請根據所需的行進方向，使用+=或-=預先設定scrollTop值。另請注意，您可以簡單地使用jQuery中的$(window).height()來代替您當前擁有的viewport()函數。

最後，您還需要在其中包含stop(true)調用，以防止用戶反覆滾動鼠標滾輪時動畫排隊。

$(document).on('wheel', function(e) { 
 
    e.preventDefault(); 
 
    $('html, body').stop(true).animate({ 
 
    scrollTop: (e.originalEvent.deltaY > 0 ? '+=' : '-=') + $(window).height() + 'px' 
 
    }); 
 
});

body { 
 
    min-height: 300vh; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>