滚动时，向下/向上滚动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

问题是因为您需要从其当前位置增加或减少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>