javascript - 关闭事件 div 后滚动条不滚动

Question

我有一个固定的菜单系统，一旦按下它就会滑出并覆盖 100% 的屏幕。当主滚动条处于事件状态时，您将能够滚动事件 div 中的菜单。关闭菜单后，滚动条将不再允许我滚动整个站点，它只会滚动滑出的 div 的长度。

我该如何解决这个问题？一旦菜单处于事件状态，我需要滚动条来控制菜单，然后在菜单未处于事件状态时能够滚动整个站点。

这是我的 JS 和完整代码 http://jsfiddle.net/8P9kh/8/

$(function(){
    window.status=0;
$('#menu').click(function(){
    if(window.status==0){
        $('#slidingMenu').stop().animate({left:'0px'},500); 
        window.status=1;
        $('body, html').css('overflow','hidden');
    }
    else{
        $('#slidingMenu').stop().animate({left:'-100%'},500);
        window.status=0;
        $('body, html').css('overflow-y','scroll');
    }
});
})

//Close menu when you click Footer

$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
    bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
    $('header').toggleClass('open');
});
});

$('#menu').click(function () {
if ($('').is('.open')) {
    $('')
        .removeClass('open')
        .animate({
        'bottom': "-=200"
    }, function () {
        var $footer = $('.activetoggle');

        if ($footer.length) 
            $footer
                .toggleClass('activetoggle footerButton')
                .text('Footer');
    });
    $('footer').slideUp(400);
}
});



$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
    $this.text('Footer');
} else {
    $this.text('Close');
}
$(this).toggleClass('activetoggle');
});

$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780 
if ($('header').is('.open')) { 
    $('header')
        .removeClass('open')
        .animate({
        'bottom': "-=200"                
    });
    $footer = $('.activetoggle');
    if ($footer.length) {
         $footer.toggleClass('activetoggle footerButton').text('Footer');
    }
    $('#dropFooter').slideToggle(400);
}
}

});

Answer 1

现在，当菜单显示时，您将 CSS overflow 属性设置为 hidden，然后设置 overflow-x 属性滚动，将 overflow 属性保留为 hidden。将 overflow 属性重置回 auto:

$('body, html').css('overflow', 'auto');