javascript - 使用 jquery 停用浏览器滚动条

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

虽然将溢出属性设置为隐藏只是隐藏滚动条，但您可以使用 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');
    });
});

小提琴：http : //jsfiddle.net/3kjzr/