1

我已经设法让这个滚动功能工作，当你停止滚动时它会滚动到 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/
我希望当你停止滚动时该功能非常快，但它根本不流畅，似乎不能找出原因？

4

2 回答 2

3

我猜这$(window).scroll(function(){是由以下行递归调用的：

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

您可以尝试设置一个可以禁用事件运行的标志吗？IE：

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/

于 2013-01-23T23:34:21.017 回答
0

我建议在用户滚动自己时阻止 scrollTop 函数运行。经过一番搜索，我从另一个堆栈问题中找到了这个不错的小提琴。这是使用滚动选项和一个名为debounce的插件。

$(window).scroll($.debounce( 250, function(){
    //Your scrollTop function
}));
于 2013-01-23T23:32:35.700 回答