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);
    });
});

这也是一个工作小提琴，以证明我的意思：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/

Answer 2

我建议在用户自己滚动时阻止scrollTop函数运行。经过一番搜索，我发现另一个fiddle的stack question很好。这是使用带有名为debounce的插件的滚动选项。

$(window).scroll($.debounce( 250, function(){
    //Your scrollTop function
}));

jQuery滚动功能不断跳跃

2 个答案: