0

さまざまなコンテンツを表示するライトボックスがあります。

$('.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 が閉じられたときに再び有効にする方法はありますか?

4

2 に答える 2

0

オーバーフロー属性を非表示に設定するとスクロールバーが非表示になりますが、次のように 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/

于 2013-10-29T11:23:14.863 に答える