滚动时，向下/向上滚动 100vh 一次

【问题标题】：On scroll, scroll 100vh down/up works once滚动时，向下/向上滚动 100vh 一次
【发布时间】：2023-04-10 05:02:02
【问题描述】：

我想处理滚动，因为当我向下滚动时我想滚动完整 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;}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;

【问题讨论】：

标签： javascript jquery

【解决方案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;
}

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：