Question

我有一个垂直照片查看器

我需要一个滚动效果，当鼠标滚轮向下时，它就是一个页面高度。

所以我有以下代码

$(document).ready(function() {
        $(window).scroll(function () {
            var H = $(window).height();
            var st = $(this).scrollTop();
            $("html, body").animate({ scrollTop: H + st }, 500, function () {
                console.log("finish scroll");
            });
        });
    });

但是当我滚动一次时，它会一次又一次地重复，直到底部。

我该如何解决这个问题？

提前致谢。

Answer 1

我使用了计数器和计时器，以便计数器在滚动完成后等待半秒钟。

http://jsfiddle.net/beardedSi/p45rH/1/

$(document).ready(function () {

var H = $(window).height(),
    go = true;
console.log(H);
//just for visual, set the height of boxes to be same as window height 
//to check it is all working
$('.box').css('height', H + "px");

function scroller() {
    $("html, body").animate({
        scrollTop: '+=' + H
    }, 400, function () {
        console.log("finished");
        setTimeout(function () {
            go = true;
        }, 400);
    });
}

$(document).on('scroll', function (e) {
    e.preventDefault();
    if (go) {
        go = false;
        scroller();
    }
});

}）;

Answer 2

问题是动画也是一个滚动事件。所以你有一个滚动循环。要解决此问题，您可以添加标记。

这不是解决问题的最佳方法，但你可以这样做=＆gt; http://jsbin.com/qagayopu/2/edit

如何在$（window）中滚动一次.scroll（）有另一个滚动命令

2 个答案: