网页网站您现在的位置是:首页 > 博客日志 > 网页网站

js禁止页面滚动

<a href='mailto:'>微wx笑</a>的头像微wx笑2020-08-11 17:02:53网页网站人已围观关键字: js  Javascript  

开发网页的时候有一个比较常见的需求,在使用层来模拟弹窗时,需要通过js脚本来实现禁止滑动弹窗后面的主体页面。具体应该如何实现呢?

开发网页的时候有一个比较常见的需求,在使用层来模拟弹窗时,需要通过js脚本来实现禁止滑动弹窗后面的主体页面。具体应该如何实现呢?xsg编程技术_踩坑日志_进阶指南_无知人生

document.body.addEventListener('touchmove', function(e){
        e.preventDefault();
    }, { passive: false });  //passive 参数不能省略,用来兼容ios和android
//添加事件
var addEvent = (function () {
	if (document.addEventListener) {
		return function (el, type, fn, capture) { document.addEventListener(type, fn, capture); };
	} else {
		return function (el, type, fn, capture) { document.attachEvent('on' + type, function () { return fn.call(el, window.event); }, capture); }
	}
})();
//添加鼠标滚动轮事件
function addEventWheel(obj, fn ,useCapture){
	var mousewheelevt=(/Firefox/i.test(navigator.userAgent))?"DOMMouseScroll": "mousewheel";//FF doesn't recognize mousewheel as of FF3.x
	addEvent(obj, mousewheelevt, handler, useCapture);
	
	//初始化处理回调函数
	function handler(event) {
		if (canScroll){
			return;
		}
		var delta = 0;
		var event = window.event ||event ;
		var delta = event.detail ?-event.detail/3 : event.wheelDelta/120;
		if(event.preventDefault){ 
				event.preventDefault(); 
				event.returnValue = false; 
			}else{ 
				event.returnValue = false;
			}
			//禁止默认事件
			return fn.apply(obj, [event, delta]);//event事件对象 delta 滚动值
	}
}

//添加鼠标滚动轮事件 随着滚动而改变值
addEventWheel(
	$(document),
	function(e,delta){ 
		$("he").innerHTML = parseInt($("he").height()) + delta;
	}, 
	{ passive: false }
);

touchmove 为移动端触摸屏的滑动事件;xsg编程技术_踩坑日志_进阶指南_无知人生

DOMMouseScroll 和 mousewheel 为PC端鼠标滚轮事件xsg编程技术_踩坑日志_进阶指南_无知人生

此程序在PC端还是存在一个问题,就是通过键盘(空格键、上下键、翻页键)还是可以滚动页面,如果想解决这个问题,需要添加相关事件的处理程序。xsg编程技术_踩坑日志_进阶指南_无知人生

其中以下函数中可以对弹窗的位置进行处理,使其可以跟随页面的滚动而动,始终保持在固定的位置。xsg编程技术_踩坑日志_进阶指南_无知人生

本文由 微wx笑 创作,采用 CC BY-NC 4.0 许可协议。 非商业性使用可自由转载、引用、甚至修改,但需署名作者且注明出处。

很赞哦! () 有话说 ()