js禁止页面滚动

微wx笑 2020-08-11【网页网站】716 3 0关键字： js Javascript

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

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

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 }
);