Question

我有一个显示各种内容的灯箱：

$('.mehr').click(function() {
$('#lightbox').css({'visibility' : 'visible'}).animate({'background-color': 'rgba(0, 0, 0, 0.9)', 'opacity': '1'}, 500);
});

$('.close').click(function() {
$('#lightbox').stop().animate({'background-color': 'rgba(0, 0, 0, 0)', 'opacity': '0'}, 500, function(){$(this).css({'visibility' : 'hidden'});});
});

当#lightbox可见时，我需要阻止用户滚动。当#lightbox可见时，是否有办法停用浏览器的滚动条，然后在#lightbox关闭时重新激活它们？

Answer 1

此代码使用css隐藏滚动

body {
   overflow: hidden;
}

在JQuery中

$("body").css("overflow", "hidden");

对于Internet Explorer 6，只需溢出html

$("html").css("overflow", "hidden");

Answer 2

虽然将overflow属性设置为hidden只是隐藏了滚动条，你可以用jQuery“锁定”当前的滚动条，如下所示：

$('.mehr').click(function() {
$('#lightbox').css({'visibility' : 'visible'}).animate({'background-color': 'rgba(0, 0, 0, 0.9)', 'opacity': '1'}, 500);
lockPosition = $(document).scrollTop();
    $(window).on('scroll', function(e) {
        $(this).scrollTop(lockPosition);
    });
});

$('.close').click(function() {
$('#lightbox').stop().animate({'background-color': 'rgba(0, 0, 0, 0)', 'opacity': '0'}, 500, function(){$(this).css({'visibility' : 'hidden'});});
    $(window).unbind('scroll');
    });
});

FIddle：http://jsfiddle.net/3kjzr/

使用jquery停用浏览器滚动条

2 个答案: