禁止浏览器上下拖拽方法

在触屏写的一些弹层总会引发不同浏览器里面的bug。

比如下图左侧窗口出现的时候,用户在拖拽右侧的body区域就会在某些浏览器里引发一些bug。

索性干掉这个方法,在弹层显示时不让用户拖拽页面。

引用的方法

//body一屏显示禁止上下拖拽

setPreventDefault.start();

//取消事件

setPreventDefault.end();

	/*禁止浏览器滚动*/
	var setPreventDefault = {
		hasClass: false,//判断有没有插入样式
	    oldScrollTop : 0,/*记录滚动条位置*/
	    docEle : document.documentElement,
	    /*开始*/
	    start:function(){
	    	if(!this.hasClass){this.addClass();}

	        this.oldScrollTop = this.docEle.scrollTop || document.body.scrollTop;
	        this.docEle.className = 'setPreventDefault';
	    },
	    /*结束*/
	    end:function(){
	         this.docEle.className = '';
	        window.scrollTo(0,this.oldScrollTop);
	    },
	    addClass:function(){
	    	var style = document.createElement('style');
	    	style.innerHTML = '.setPreventDefault,.setPreventDefault body{height:100%;width:100%; position:absolute;top:0;left:0;overflow:hidden}';
	    	document.body.appendChild(style);
	    	this.hasClass = true;
	    }
	};

  

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值