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

イベントの実行を無効にできるフラグを設定してみてください。すなわち:

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 に答える