css的处理:
html, body { height: 100%; } body{ position: relative; } /*遮罩层显示时body的样式*/ .notScroll { overflow: hidden; } /*遮罩层*/ .window_mask { position: fixed; top: 0 !important; } /*弹窗*/ .window_boundingBox { position: fixed !important; top: 50% !important; margin-top: -214px !important; z-index: 1001; width: 90%; left: 5%; background-color: rgb(232, 232, 232); border-radius: 3px; overflow: hidden; } /*弹窗中需要滚动的部分*/ .window_boundingBox .window_body { overflow: auto; webkit-overflow-scrolling: touch; line-height: 28px; font-size: 16px; padding: 5px 10px; height: 242px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
js处理:
// 遮罩出来后让body不可滚动 $('body,html').addClass('notScroll'); //---------------------------- // 遮罩去掉之后body 可滚动 $('body,html').removeClass('notScroll');
文章来源: 遮罩层上弹窗滚动时禁止下层页面滚动的处理