防止在正文上滚动,但允许在图层上滚动



我正在尝试制作一个移动网站,单击按钮时弹出了变暗的图层。

我将正文滚动条设置为图层打开时阻止,但问题是我需要在图层中的div 内滚动条。

有谁知道如何在身体上设置禁用的滚动条,并在图层内部设置滚动条?

这就是我尝试过的。http://fiddle.jshell.net/w23wt7jq/2/

<div class="wrapper">
  <a href="#" class="btn_menu">click</a>
</div>
<div id="mask" class="mask"></div> 
<div class="menu"> 
    <div id="scrollarea">
       test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
    </div> 
</div>
body { height:100%; }
.mask { width:100%; height:100%; position:fixed; left:0; top:0; z-index:1000; display:none; background-color: rgba(0,0,0,.6); }
.menu { display:none; width:180px; height:100%; position:fixed; left:-280px; top:0; z-index:1001; background-color:#F93; }

#scrollarea {  width:80%; height:200px; overflow-y:scroll; background:green }
function layer_aside() {
        if($(".menu").is(":hidden")){
            $(".menu").show();
            $(".menu").css('left','0');
            $("body").css("overflow", "hidden"); 
            $("#mask").show(); 
            $('body').bind('touchmove', function(e){e.preventDefault()});
        } else {
            $(".menu").css('left','0');
            $(".menu").hide();
            $("body").css("overflow", "visible"); 
            $("#mask").hide();
            $('body').unbind('touchmove');
        }
    } 
    $('.btn_menu').click(function(){
        layer_aside();
    });
    $("#mask").click(function(){
        layer_aside();
    });

你试过body{ overflow: hidden; }

最新更新