加遮罩后禁止滚动（我觉得最好的方法）

最新推荐文章于 2022-10-24 06:00:00 发布

ionluo

最新推荐文章于 2022-10-24 06:00:00 发布

阅读量7.9k

点赞数

分类专栏：前端积累 jquery

本文链接：https://blog.csdn.net/ion_L/article/details/82465417

版权

前端积累同时被 2 个专栏收录

54 篇文章 2 订阅

订阅专栏

jquery

5 篇文章 0 订阅

订阅专栏

“如何加遮罩后禁止页面滚动？”关于这个问题，查找了很多网上的方案，感觉兼容性不好，下面写上我的方法，注意这里用了jquery框架

var top = 0;
	
$(document).scroll(function(){
	if($(".mask").is(":visible")){
		$(document).scrollTop(top);
	}
});


/*  top用来记录当前滚动条位置，所以每次$(".mask").show()时，需要使用
top = $(document).scrollTop();记录下当前的滚动条位置  */

当前网上搜索的给body加上overflow:hidden 然后 overflow:auto 也是可以的。

注意：这里用event.preventDefault（）并不能阻止其默认行为，return false也是一样。

2020-09-26更新补充：

上面的方法终究太过麻烦，补充更简单的实现方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
        <style>
            .box{
                width: 500px;
                height: 2000px;
                margin: 0 auto;
                background: linear-gradient(#008000, #fff, #ff007f);
            }
        </style>
	</head>
	<body>
        <div class="box" onclick="fixScroll()"></div>
        <script>
            var count = 0;
            function fixScroll(){
                if(count % 2 === 0){
                    document.documentElement.style.overflow = 'hidden';
                    document.body.style.overflow = 'hidden';
                    count++;
                }else{
                    document.documentElement.style.overflow = '';
                    document.body.style.overflow = '';
                    count++;
                }
                
            }
        </script>
	</body>
</html>