Question

我正在研究javascript滚动。我有以下HTML代码

<div class="wrapper">
    <div class="red div current"></div>
    <div class="blue div"></div>
    <div class="green div"></div>
    <div class="yellow div"></div>
</div>

在上面的代码中，我有四个div标签red, blue, green and yellow。所有这些都是跟随css的位置。

html, body {
    height: 100%;
}
.wrapper {
    overflow: hidden;
    height: 100%;
}
.div {
    position: relative;
    height: 100%;
}
.red {
    background: red;
}
.blue {
    background: blue;
}
.green {
    background: green;
}
.yellow {
    background: yellow;
}

在上面的html和css中，红色div标签是当前的标签，表示用户在屏幕上看到红色div标签。现在我要做的是当用户滚动窗口一次，然后下一个div标签，即蓝色将被动画并移动到顶部并且将对用户可见，而红色div标签将在蓝色标签后面。绿色和黄色都是同样的过程。

问题是，当用户滚动一次然后div标签应该动画但是我当前的javascript代码是继续阅读滚动并一个接一个地动画div标签。我想要的是当用户滚动一次然后滚动应该被禁用，直到蓝色div标签被动画化。然后应启用滚动。再次当用户第二次滚动时，滚动应该禁用，直到绿色div标签完成其动画。黄色也一样。

我如何实现上述目标？

这是我的javascript

$(window).on("scroll", function () {
    var next = $('.current').next();
    var height = next.outerHeight();

    next.animate({top: '-=' + height}, 500, function () {
        $(this).prev().removeClass('current');
        $(this).addClass('current');
    });
});

Answer 1

请查看更新 JsFiddle

$(window).on("scroll", function () {
var next = $('.current').next();
var height = $('.current').outerHeight();
$('.current').prevAll().each(function(){
    height += $(this).outerHeight();
});

next.animate({top: '-=' + height}, 500, function () {
    $(this).prev().css('top','');
    $(this).prev().toggleClass('current');
    $(this).toggleClass('current');
});

}）;

Answer 2

你的例子没有按预期工作的主要原因是因为你是相对定位div，而不是将它们移动到正确的位置。

工作JSFiddle：

http://jsfiddle.net/seanjohnson08/rVVuc/6/

.wrapper {
    overflow: hidden;
    height: 100%;
    position: relative;
}
.div {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 100%;
}
.current{
    top: 0;
}

如果您正在寻找限制触发滚动事件数量的方法，请尝试限制：http://benalman.com/projects/jquery-throttle-debounce-plugin/。我的解决方案不需要这个，因为无论它多少次触发滚动事件，它只会告诉jquery动画到顶部：0，它没有机会动画过去。

javascript窗口滚动问题

2 个答案: