页面禁止滚动

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_37581708/article/details/78500331

背景：
有一个蒙版弹窗 要求 ：

1.在弹出窗口时图片可以放大缩小，但是不可以页面上下滑动；

2.关闭蒙版弹窗时恢复页面滑动功能。

实现代码：

function start() {//点击弹出时允许图片放大并禁止滑动
	$("meta[name='viewport']").attr('content',"width=device-width, minimum-scale=1.0, maximum-scale=10");//允许放大
	$("#pop").css("display", "block");
	document.documentElement.style.overflow='hidden';//电脑端禁止滑动
	document.body.style.overflow='hidden';//手机端禁止滑动
}
function end() {//点击关闭时禁止图片放大并允许滑动
	$("meta[name='viewport']").attr('content',"width=device-width, minimum-scale=1.0, maximum-scale=1");//禁止放大
	$("#pop").css("display", "none");
	document.documentElement.style.overflow='auto';//电脑端可以滑动
	document.body.style.overflow='auto';//手机端可以滑动
}