6

背景:

マウスのスクロールアップとマウスのスクロールダウンを次のように使用して、一種のマップをスクロールできるシステムを作成しようとしています。

 -------
|       |
|   1   |
|       |
 -------
 -------    -------   -------   -------
|       |  |       | |       | |       |
|   2   |  |   3   | |   4   | |   5   |
|       |  |       | |       | |       |
 -------    -------   -------   -------
                                -------
                               |       |
                               |   6   |
                               |       |
                                -------

上記の各ボックスは、ブラウザーの高さと幅になるように JavaScript でリセットされます。マウスを上下にスクロールすると、ブラウザは div 1 から始まり 2 というように、マップ内の同じ位置までスクロールします。この配置は、マウスのスクロールをリッスンし、上部に適切なパディングを追加し、左側にマージンを追加して、上のマップのような錯覚を作成するスクロール関数を介して設定されます。

コードペンは次のとおりです。

http://codepen.io/lorenzoi/pen/mxejJ

そして、ここにJavaScriptがあります：

$(function(){

    $(window).on('resize', function(){
        var $divs = $('.vertical, .horizontal > div'),
        ww =  $(this).width(),
        wh =  $(this).height();

        $divs.css({
            height : wh,
            width : ww
        });

        $('.horizontal').each(function(){
            var $container = $(this),
            nbChildren = $container.children().length;
            posY = $container.offset().top,


            $container.css({
                height: ww*(nbChildren-1) + wh,
                width: ww*(nbChildren)
            });
        });
    }).trigger('resize');

    $(window).on('scroll', function(){
        var wh = $(window).height(),
        scroolTop = $(window).scrollTop();

        $('.horizontal').each(function(){
            var $container = $(this),
            posY = $container.offset().top,
            height = $container.height(),
            nbChildren = $container.children().length,
            marginMax = $container.width()/nbChildren*(nbChildren-1),
            marginL = scroolTop - posY;

            if(marginL<0) marginL = 0;
            else if (marginL>marginMax) marginL = marginMax;
            $container.css('marginLeft', -marginL);
            $container.css('paddingTop', marginL);
        });
    }).trigger('scroll');

});

問題：

ウィンドウのサイズを変更すると、div 2 から 5 に対してスクロール関数が呼び出されたときにそれ自体が修正される奇妙な div オフセットが作成されます。

.trigger('サイズ変更'); はい、常に呼び出す必要がありますか？スクロール機能が作成されたときにのみ呼び出される理由がわかりません。

これはどのように修正できますか？

4

3 に答える 3

0

実行頻度が高すぎるイベント ハンドラーがある場合は、次のように調整できます。

function throttle(ms, fn) {
    var allow = true;
    function enable() {
        allow = true;
    }
    return function(e) {
        if (allow) {
            allow = false;
            setTimeout(enable, ms);
            fn.call(this, e);
        }
    }
}

throttle次に、ハンドラーを割り当てるときにハンドラーを渡します。n指定した最初の引数に基づいて、ミリ秒ごとに最大で 1 回実行される関数を返します。

$(window).resize(throttle(100, function(e) {
    // do heavy work
}));
于 2013-04-19T19:32:18.187 に答える