Question

我正在尝试创建一个移动网站，并且在点击按钮时我已经调暗了图层弹出窗口。

我在打开图层时将身体滚动条设置为阻止，但问题是我需要在图层中的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();
    });

Answer 1

您是否尝试过body{ overflow: hidden; }

阻止在正文上滚动，但允许在图层上滚动

1 个答案: