Question

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

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

lastScrollTop 用于确定滚动方向。
wh 用于从当前窗口添加和减去window.innerHeight ScrollTop。

问题是，一旦滚动（一次），它就会滚动到最底部。我试图解决这个问题是 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

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

jQuery从头开始一页

2 个答案: