Question

我正在制作一个单页滑块插件，我有一个滚动事件回调，其中包含一个动画scrollTop，再次触发滚动事件并陷入循环。我尝试了一些诸如旗帜之类的东西，但似乎没有一件对我有用。

这模仿了以下内容：

http://alvarotrigo.com/fullPage/examples/scrollBar.html

滚动以固定步长约束，跳转到上一个或下一个元素，这些元素都占据页面的整个高度。

代码如下：

function pageDown() {
    // Some stuff, not important
    if (currentIndex+1 === pageCount) nextIndex = 0;
    else nextIndex = currentIndex+1;
    nextPage = $pages.eq(nextIndex);

    // Important stuff
    $('html body').animate({
        scrollTop: nextPage.offset().top
     }, 400, function() {preventScroll=false});
}

function pageUp() {
    // Some stuff, not important
    if (currentIndex === 0) nextIndex = pageCount-1;
    else nextIndex = currentIndex-1;
    nextPage = $pages.eq(nextIndex);

    // Important stuff
    $('html body').animate({
        scrollTop: nextPage.offset().top
     }, 400, function() {preventScroll=false});
}

var lastScroll = 0,
    preventScroll = false;
$(window).on('scroll', function() {
    var currentScroll = $(window).scrollTop();
    if(!preventScroll) {
        preventScroll = true;
        if (currentScroll > lastScroll) pageDown();
        else pageUp();
    }
    lastScroll = currentScroll;
});

Answer 1

我在测试时遇到的主要问题是jQuery complete的{{1}}回调在它生成的最终animate事件之前触发。请注意，似乎只有在出于某种原因向下滚动时才会发生。

在尝试了两步锁定之后，我使用了一个带有3个状态的标志来取消最后scroll事件，该事件工作得相当好，我进一步探索，因为它与现有的翻转逻辑不太合作在您的原始代码中（到达目的地时跳到另一端）。

我提出了以下代码，它记录了要到达的目标位置，并且只要当前位置与目标不匹配，就会忽略所有scroll个事件。

这也实现了翻转逻辑，必须与关联的HTML和CSS结合才能正常工作，因为我们需要一些空白区域（这里每边有一个像素），以允许scroll事件在顶部和底部射击。我们还启动第一个滚动，以正确定位第一个元素并允许翻转立即工作。

我希望代码中的注释能够提供理解所用逻辑所需的附加信息。

此jsfiddle

中提供了工作演示

HTML：

scroll

CSS：

<div class="pageScroller">
    <div class="bumper"></div>
    <div class="page" style="background-color:red;"></div>
    <div class="page" style="background-color:green;"></div>
    <div class="page" style="background-color:blue;"></div>
    <div class="page" style="background-color:violet;"></div>
    <div class="page" style="background-color:cyan;"></div>
    <div class="bumper"></div>
</div>

JavaScript的：

html, body {
    height:100%;
    margin:0;
    padding:0;
}
.pages {
    padding:1px 0;
    background-color:yellow;
}
.pageScroller, .page {
    height:100%;
}
.bumper {
    height:1px;    
}

使用jQuery时，防止通过动画scrollTop触发滚动事件

1 个答案: