在滚动，滚动100vh向下/向上作品一旦

问题描述：

我想处理滚动，当我向下滚动我要滚动全viewport.height和高达相同的，但相反的方式：在滚动，滚动100vh向下/向上作品一旦

它正在与此，但它仅适用于工作一次向下滚动和备份一次（也有一段时间了，而我不能滚动，如果我去向下和向上一段时间后，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>

答

问题是因为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>

在滚动，滚动100vh向下/向上作品一旦

相关推荐