前端--弹出框弹出后禁用背后的滚动

最新推荐文章于 2024-06-17 09:12:37 发布

wxy964666897

最新推荐文章于 2024-06-17 09:12:37 发布

阅读量3.8k

点赞数 1

分类专栏： js css

本文链接：https://blog.csdn.net/wxy964666897/article/details/83339738

版权

js 同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

css

4 篇文章 0 订阅

订阅专栏

弹出框显示后背后仍然可以滚动的问题可以这样解决，第一种设置body，但是不兼容ios，第二种禁用touch事件，但是pc端无效，于是把两种结合就能兼容ios和其他手机端和pc端。

//弹出框后禁止滑动  
//先设置body，iOS无效
$("body").css({"height":"100%","overflow":"hidden"})

//恢复
$("body").css({"height":"auto","overflow":"auto"})

//兼容ios方法1
//设置遮罩层后无法滑动和触摸  pc无效
var shield=document.getElementById("#grayback");//这里写遮罩层的名字
        shield.addEventListener("touchstart",function(e){
                    e.stopPropagation();
                    e.preventDefault();
                },false);

//兼容ios方法2
//这是自己综合写的方法，兼容所有浏览器和手机,ios和安卓
export const touchMixins = {
    bodyScroll: (event) => {
        event.preventDefault();
    },
    //禁用touchmove
    noTouch: () => {
        console.log(touchMixins)
        document.body.addEventListener(
            "touchmove",
            touchMixins.bodyScroll, { passive: false },
            false
        );
        document.body.style.overflow = "hidden";
        document.body.style.height = "100%";
    },

    //恢复touchmove
    haveTouch: () => {
        document.body.removeEventListener(
            "touchmove",
            touchMixins.bodyScroll, { passive: false },
            false
        );
        document.body.style.overflow = "auto";
        document.body.style.height = "auto";
    }
}