0

このスクリプトを使用して、「ライトボックススタイル」の画像を開いたときにスクロールをフリーズしようとしています。スクリプトに小さなエラーがある可能性がありますが、それを理解することはできません

jQuery.fn.lockToggle = function () { 

    var top = $(window).scrollTop();
    var left = $(window).scrollLeft();

    var clickCount = 0;

    $(this).click(function() {

        clickCount++;

        if(clickCount % 2 === 1  ){
            $('body').css('overflow', 'hidden');

            $(window).scroll(function(){
                $(this).scrollTop(top).scrollLeft(left);
            });

        } else {
           $('body').css('overflow', 'auto');
           $(window).unbind('scroll'); 
        }
    });

    return this;
};

このスクリプトのしくみ（表示順）：

  1. 現在のスクロール位置を取得し、2つの変数に格納します
  2. オブジェクトのクリック数の変数を作成します
  3. クリック数が奇数の場合、ページは現在の位置でフリーズします
  4. それ以外の場合（偶数）、ページを自由にスクロールできます

これらはすべて、呼び出すだけで使用できる単純なjQuery関数で機能します.lockToggle()

あなたはここで完全な例でこれを見ることができます：

http://jsfiddle.net/JamesKyle/8H7hR/30/

（画像をクリックしてください）

4

1 に答える 1

1

クリックするたびにクリックイベントをバインドします。これにより、毎回ますます多くのイベントがバインドされ、ロックがすぐに実行されることはありません。これはあなたが望んでいるように見えるものではありません。

私の理解では、あなたが指摘しているエラーは、クリックするとスクロールがロックされず、もう一度クリックしてもロックが解除されないという事実です。isLockedこれは、次のような単純な変数を使用して正しく実装できます：http: //jsfiddle.net/8H7hR/32/。

var isLocked = false;

jQuery.fn.lockToggle = function () {    
    var top = $(window).scrollTop();
    var left = $(window).scrollLeft();

    if(isLocked) { // locked so unlock

       isLocked = false;
       $('body').css('overflow', 'auto');
       $(window).unbind('scroll');

    } else { // unlocked so lock

        isLocked = true;
        $('body').css('overflow', 'hidden');
        $(window).scroll(function(){
            $(this).scrollTop(top).scrollLeft(left);
        });

    }

    return this;
};
于 2011-11-21T18:55:55.920 に答える