vue移动端弹起蒙层滑动禁止底部滑动

最新推荐文章于 2023-04-07 17:34:57 发布

vieber

最新推荐文章于 2023-04-07 17:34:57 发布

阅读量2k

点赞数

分类专栏：前端 vue h5混合应用开发移动开发

本文链接：https://blog.csdn.net/sufubo/article/details/87628649

版权

前端同时被 3 个专栏收录

91 篇文章 0 订阅

订阅专栏

vue

34 篇文章 0 订阅

订阅专栏

h5混合应用开发

32 篇文章 0 订阅

订阅专栏

解决办法

在蒙层弹起的时候将body设置为fixed定位
在蒙层消失的时候将body恢复原位

popupVisible(newValue) {
   if (newValue) {
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
        document.body.style.height = '100%';
    }
    else {
        document.body.style.position = 'static';
        document.body.style.height = 'auto';
    }
},

设置为fixed的时候整个页面会恢复原位，如果需要把位置开始scrollY记下来，恢复的时候在滚到原来的位置

popupVisible(newValue) {
   if (newValue) {
        document.body.style.position = 'fixed';
        document.body.style.width = '100%';
        document.body.style.height = '100%';
        this.top = window.scrollY;
    }
    else {
        document.body.style.position = 'static';
        document.body.style.height = 'auto';
        window.scrollTo(0, this.top);
    }
}