js禁止页面滚动
微wx笑
2020-08-11【网页网站】
3
0关键字：
js Javascript
开发网页的时候有一个比较常见的需求，在使用层来模拟弹窗时，需要通过js脚本来实现禁止滑动弹窗后面的主体页面。具体应该如何实现呢?
开发网页的时候有一个比较常见的需求，在使用层来模拟弹窗时，需要通过js脚本来实现禁止滑动弹窗后面的主体页面。具体应该如何实现呢?
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 为移动端触摸屏的滑动事件；
DOMMouseScroll 和 mousewheel 为PC端鼠标滚轮事件
此程序在PC端还是存在一个问题，就是通过键盘（空格键、上下键、翻页键）还是可以滚动页面，如果想解决这个问题，需要添加相关事件的处理程序。
其中以下函数中可以对弹窗的位置进行处理，使其可以跟随页面的滚动而动，始终保持在固定的位置。
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/web/2020-08-11/518.html
