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

最新推荐文章于 2025-03-21 09:30:02 发布

原创最新推荐文章于 2025-03-21 09:30:02 发布 · 2.0k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

91 篇文章

订阅专栏

vue

34 篇文章

订阅专栏

h5混合应用开发

32 篇文章

订阅专栏

本文介绍了一种解决网页中蒙层弹出时滚动条异常的方法。通过在蒙层显示时将body定位设为fixed，并记录当前滚动位置，在蒙层隐藏时恢复body定位并滚动至原位置，有效解决了页面布局错乱及滚动同步问题。

解决办法

在蒙层弹起的时候将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);
    }
}