css3和css的区别，css3层级穿透,css页面滑动穿透的两种解决办法-小白筆記-匯編語言學習筆記

css3和css的区别，css3层级穿透,css页面滑动穿透的两种解决办法

2023-09-28 阅读 24 评论 0

摘要：这篇文章主要介绍了css如何防止页面滑动穿透,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧问题描述：移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题。

这篇文章主要介绍了css如何防止页面滑动穿透,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

问题描述：

移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是著名的滚动穿透问题。

css3和css的区别？示例demo：

样式：

.box{

width: 100%;

csscss3样式兼容。height: 100%;

position: relative;

}

.dialog{

css3与css的关系？width: 100%;

height: 100%;

position: fixed;

left: 0;

css选择器，top: 0;

background: rgba(0,0,0,0.4);

}

.dia-con {

css溢出，width: 40vw;

height: 38vw;

background: white;

margin: 30vh auto;

vue样式穿透、}

结构：

1测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

2测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

HTML5和css？4测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

css3动画库_、测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

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();

});

运行效果：

解决方案二：

首先设置 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)}

用户信息丢失，请先登录

确定

//解决方案一：

// for(var i = 0;i<=30;i++){

// $(".list").append("

BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB

");

// }

// //阻止防止滚动、缩放。

// $(".sliders,.modals").on("touchmove",function(event){

// event.preventDefault();

// });