jQuery滚动功能不断跳跃

Question

我已经设法让这个滚动功能发挥作用，当你停止滚动时，它会滚动到 div 的顶部，唯一的问题是，它根本不顺利，它只是不停地跳来跳去，不效果不太好。
这是我的js:

$(document).ready(function(){
        Resize();
        });

        //Every resize of window
        $(window).resize(function() {
            Resize();
        });

        //Dynamically assign height
        function Resize() {
            // Handler for .ready() called.
            var windowHeight = $(window).height() + 'px';
            $('.fill-browser').css('height', windowHeight);
        }

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = $(".fill-browser").height();

    $(window).scroll(function(){
        var _cur_top = $(window).scrollTop();
        var totalHeight = $('body').height();
        var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

        $('html, body').stop().animate({scrollTop: posToScroll}, 200);
    });
});

这里还有一个工作 fiddle 来演示我的意思:http://jsfiddle.net/vHAWW/2/
我希望当你停止滚动时该功能能够很快，但它一点也不流畅，似乎不明白为什么？

Answer 1

我猜测 $(window).scroll(function(){ 是通过以下行递归调用的:

 $('html, body').stop().animate({scrollTop: posToScroll}, 200);

您能否尝试设置一个可以禁用事件运行的标志？即:

var _top = $(window).scrollTop();
var individualDivHeight = $(".fill-browser").height();
var running = false;

$(window).scroll(function(){

    if(running)
        return;

    running = true;
    var _cur_top = $(window).scrollTop();
    var totalHeight = $('body').height();
    var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

    $('html, body').stop().animate({scrollTop: posToScroll}, {duration:200, complete: function(){running = false;}});
});

尽管如您所见，当我开始滚动时，它会直接运行。我建议您使用超时或类似的方法:

$(function(){
    var _top = $(window).scrollTop();
    var individualDivHeight = $(".fill-browser").height();
    var running = false;
    var timeout = null;

    $(window).scroll(function(){

        if(running)
            return;

        clearTimeout(timeout);
        timeout = setTimeout(function() {
            running = true;
            var _cur_top = $(window).scrollTop();
            var totalHeight = $('body').height();
            var posToScroll = Math.round(_cur_top / individualDivHeight) * individualDivHeight;

            $('html, body').stop().animate({scrollTop: posToScroll}, {duration:200, complete: function(){running = false;}});
        }, 200);

    });
});

JsFiddle: jsfiddle.net/HmaWW/