javascript实现蒙版与禁止页面滚动

时间：2021-05-26

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

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

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=no"> <title>蒙版与禁止滚动</title> <style> .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; } </style></head><body> <div class="container"> <p>内容</p> </div> <!-- 蒙版 --> <div class="modal"> <p class="p">按钮</p> </div></body><script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script><script>$(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' }); }})</script></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章