从零开始的 jQuery 一页

Question

我正在尝试创建一个简单的“一页”滚动。

目标是在滚动时滚动 window.innerHeight - 就像 fullPage.js 和类似库一样。

• lastScrollTop 用于确定滚动方向。
• wh 用于从当前添加和减去 window.innerHeight 滚动顶部。

问题是，一旦你滚动（一次），它 滚动到最底部。我解决这个问题的尝试是创建 var A，当滚动动画进行时变为1， 好像没用。

var lastScrollTop = 0;
    var a = 0;
   var wh = 0; 

    $(window).scroll(function () {
        
        var st = $(window).scrollTop();
        if (a == 0) {
            a = 1;
            
            if (st > lastScrollTop) {
            /* SCROLLING DOWN */
                wh = $(window).scrollTop() + window.innerHeight;
                $("html, body").stop().animate({scrollTop: wh}, 700, function () {
                    a = 0;
                });

            } else {
            /* SCROLLING UP */
                wh = $(window).scrollTop() - window.innerHeight;
                $("html, body").stop().animate({scrollTop: wh}, 700, function () {
                    a = 0;
                });
            }
            
            lastScrollTop = st;
        }
    });

body {
  margin: 0;
}

p {
  margin: 0;
  font-size: 70px;
  color: #fff;
}

.section {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" style="background:rgb(100,100,255)">
  <p>Blue</p>
</div>
<div class="section" style="background:rgb(60,150,60)">
  <p>Green</p>
</div>
<div class="section" style="background:rgb(180,30,30)">
  <p>Red</p>
</div>
<div class="section" style="background:rgb(80,0,0)">
  <p>Brown</p>
</div>
<div class="section" style="background:rgb(0,0,0)">
  <p>Black</p>
</div>

Answer 1

在窗口开始滚动后触发滚动事件，因此该事件有点滞后。如何捕获Mousewheel event in modern browsers 中所示的鼠标滚轮事件并在滚动发生时存储一个布尔值？

我对您的代码进行了一些重构，以删除重复代码并使用更少的变量和更易读的名称。您可以使用 let 代替 var 并使用三元语句代替 if/else 块来进一步缩短它。

var scrollTop = $(window).scrollTop();
var isScrolling = false;

var myitem = window;
if (myitem.addEventListener)
{
    // IE9, Chrome, Safari, Opera
    myitem.addEventListener("mousewheel", MouseWheelHandler, false);
    // Firefox
    myitem.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
}
// IE 6/7/8
else
{
    myitem.attachEvent("onmousewheel", MouseWheelHandler);
}

function MouseWheelHandler(e) {
    // cross-browser wheel delta
    var e = window.event || e; // old IE support
    var delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
    e.preventDefault();  
    
  if (isScrolling ) {   
    return;
  } else { 
    isScrolling = true;
  }

  if (delta < 0 ) {
    scrollTop = scrollTop + window.innerHeight;
  } else {
    scrollTop = scrollTop - window.innerHeight;
  }

  $("html, body").stop().animate({
    scrollTop: scrollTop
  }, 700, function() {
    scrollTop = $(window).scrollTop();
    isScrolling = false;
  });

}

body {
  margin: 0;
}

p {
  margin: 0;
  font-size: 70px;
  color: #fff;
}

.section {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="section" style="background:rgb(100,100,255)">
  <p>Blue</p>
</div>
<div class="section" style="background:rgb(60,150,60)">
  <p>Green</p>
</div>
<div class="section" style="background:rgb(180,30,30)">
  <p>Red</p>
</div>
<div class="section" style="background:rgb(80,0,0)">
  <p>Brown</p>
</div>
<div class="section" style="background:rgb(0,0,0)">
  <p>Black</p>
</div>

Answer 2

所以，一页滚动这个词对我来说是新的，但我已经用谷歌搜索了它并了解您的问题。
如果您有各种具有页面行为的 div，但这些 div 仅在一个页面中，则 window.innerHeight 将仅返回该单个页面底部的位置。那是最后一个 div 页面。 要解决这个问题，您可以在每个 div 上放置 id，然后使用 jQuery 滚动处理程序滚动到该 id。 或者你可以使用这个http://www.thepetedesign.com/demos/onepage_scroll_demo.html#