html js控制页面蒙版,javascript实现蒙版与禁止页面滚动

本文实例为大家分享了javascript实现蒙版与禁止页面滚动的具体代码，供大家参考，具体内容如下

项目需求：页面很长，要求加个蒙版，点击特定位置蒙版消失可以滑动页面，否则蒙版存在页面不可以滑动；要同时兼容移动端和pc端。

蒙版与禁止滚动

.container{

width:200px;

height:2000px;

background-color:blue;

}

.modal{

width: 100%;

position:fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

z-index: 999;

background-color: rgba(0,0,0,0.7);

background-size: 100%;

}

.p{

font-size: 50px;

color:red;

text-align:center;

}

内容

按钮

$(function(){

// 阻止蒙版后页面滑动

if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {

//移动端

$(".modal").on('touchmove',function(e){

e.stopPropagation();

e.preventDefault();

$('.p').click(function(){

$(this).parent().hide();

})

})

} else {

//PC端

var flag=true;

$('.p').click(function(){

$(this).parent().hide();

$('body').css({ "overflow":'visible'});

flag=false;

})

if(flag)

$('body').css({ "overflow":'hidden' });

}

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。