手机端内容超出一屏弹出遮罩层的时候如何不让底下内容滑动,如图?


clipboard.png

html 部分布局


 <body>
    <div>
        <p>段落1</p>
        <p>段落2</p>
        <p>段落3</p>
        ...
        <p>段落50</p>
    </div>
    <div class="fixed"></div>
</body>

css 遮罩样式


 .fixed
    {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0,0,0,.3);
        z-index: 999;
    }

HTML css

阿波罗小萨 9 years, 2 months ago

方法一:外层在包一层div,宽高和屏幕一样,当遮罩层出现时,外层div的overflow:hidden;关闭遮罩时overflow:auto;
方法二:使用插件iscroll5.js 模拟原生的滚动条

想不到啥好名 answered 9 years, 2 months ago

这个问题我感觉你可以在遮罩层上 阻止默认事件和事件冒泡。把滑动相关的事件都干掉应该可以吧

辣炒板蓝根 answered 9 years, 2 months ago

Your Answer