这篇文章主要介绍了css如何防止页面滑动穿透,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
问题描述：
移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题。
示例demo：
样式：
.box{width: 100%;height: 100%;position: relative;}.dialog{width: 100%;height: 100%;position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.4);}.dia-con {width: 40vw;height: 38vw;background: white;margin: 30vh auto;}
结构：
立即学习“前端免费学习笔记（深入）”；
1测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字2测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字4测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字5测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字6测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字7测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字8测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字
内容
在手机页面运行上面代码如图所示： 在灰色的遮罩上滑动的时候 下面的 “测试文字” 也会跟着滑动。
解决方案一：
阻止顶层 遮罩的默认行为。阻止冒泡。
示例demo：
.modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3;color:#fff;font-size:14px;background:#4185F3;margin:0 auto}.modals-body{padding:30px 15px;font-size:10px;color:#666;text-align:center;background:#fff}.sliders{cursor:not-allowed;display:block;position:fixed;overflow:hidden;z-index:103;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.8)}.modals{overflow-y:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333;display:block;box-shadow:0 0 3px rgba(0,0,0,.1);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
用户信息丢失，请先登录
for(var i = 0;i<=30;i++){$(".list").append("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
");}//阻止防止滚动、缩放。$(".sliders,.modals").on("touchmove",function(event){event.preventDefault();});$(".btns").on("click",function(){$(".sliders,.modals").remove();});
Kuwebs企业网站管理系统3.1.5 UTF8查看详情酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描
1
运行效果：
解决方案二：
首先设置 body 的overflow ： hidden; 这样超出部分 就不会滑动。当 遮罩 消失时，在设置body的 overflow： initial； 或者设置为 scroll即可
示例demo：
body{overflow:hidden;}.modals button{width:100%;margin:0 auto;height:auto;line-height:30px;border:1px solid #4185F3;color:#fff;font-size:14px;background:#4185F3;margin:0 auto}.modals-body{padding:30px 15px;font-size:10px;color:#666;text-align:center;background:#fff}.sliders{cursor:not-allowed;display:block;position:fixed;overflow:hidden;z-index:103;top:0;right:0;bottom:0;left:0;width:100%;height:100%;background:rgba(20,20,20,.8)}.modals{overflow-y:auto;max-height:95%;font-size:16px;z-index:103;border-radius:5px;background:#fff;width:50%;color:#333;display:block;box-shadow:0 0 3px rgba(0,0,0,.1);position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}
用户信息丢失，请先登录
//解决方案一：// for(var i = 0;i<=30;i++){// $(".list").append("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
");// }// //阻止防止滚动、缩放。// $(".sliders,.modals").on("touchmove",function(event){// event.preventDefault();// }); // $(".btns").on("click",function(){// $(".sliders,.modals").remove();// });// 解决方案 二：for(var i = 0;i<=30;i++){$(".list").append("BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
");}$(".btns").on("click",function(){$(".sliders,.modals").remove();//关键代码$("body").css("overflow-y","initial");});
总结：
最简单的解决方案：
body{overflow: hidden;}
在body上增加这个样式即可禁止滑动。
以上就是css页面滑动穿透的两种解决办法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609885.html
微信扫一扫 
支付宝扫一扫 
