.lockToggle( ) jQuery

.lockToggle( ) jQuery

本文关键字：jQuery lockToggle      更新时间：2023-09-26

我试图使用这个脚本来冻结滚动时，一个'lightbox样式'的图像打开。脚本中可能有一个小错误，但我无法找出

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. Else(是偶数)则允许页面自由滚动

所有这些都在一个简单的jQuery函数中工作，只需调用.lockToggle()

即可使用

你可以在这里查看完整的示例:

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

(点击图片)

每次单击都绑定一个单击事件。每次都会绑定越来越多的事件，并且不会立即执行锁定。这似乎不是你想要的。

从我的理解，你所指的错误是，滚动不锁定时点击，并没有解锁时再次点击。您可以使用一个简单的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;
};
相关文章：