解决：JS 弹层后底部页面可以滚动、vue 弹出框后面页面可以滚动（web端）

柔情只为你懂 2022-10-11 00:48 468阅读 0赞

做web端项目过程中，发现点击弹窗后，弹窗后面的页面还可以滚动。

复现如下：

![在这里插入图片描述][20210629131003501.gif_pic_center]  
**【方法1】**

step1：在弹框页面使用

@mousewheel.prevent

例：

<div
        v-show="workShowMenu"
        @mousewheel.prevent
     >
     // TO DO...弹框内容
    </div>

**`注意`**：该方法不适用于弹框上也有滚动条的时候，会失效。

**【方法2】**

step1：在点击出现弹框的事件里加上这句：

document.documentElement.style.overflow = "hidden";

step2：在点击关闭弹框的事件里加上这句：

document.documentElement.style.overflow = "scroll";

【优化】

若项目里使用弹窗较多，则可以通过在原型上定义它们使其在每个 Vue 的实例中可用（main.js）

//弹出框后面页面禁止滑动
    Vue.prototype.$stopScroll = function () { 
      document.documentElement.style.overflow = "hidden";
    }
    
    //弹出框后面页面可以滑动
    Vue.prototype.$allowScroll = function () { 
       document.documentElement.style.overflow = "scroll";
    }

step1：在点击出现弹框的事件里加上这句：

this.$stopScroll();

step2：在点击关闭弹框的事件里加上这句：

this.$allowScroll();

> 注：两个事件之所以要用$开头，因为 $ 是在 Vue所有实例中都可用的属性的一个简单约定。这样做会避免和已被定义的数据、方法、计算属性产生冲突。

[20210629131003501.gif_pic_center]: /images/20221005/f487879ba8444c3fbf2f7fbfbba7ae2f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，468人围观）

还没有评论，来说两句吧...

相关阅读

相关解决el-dialog弹框出现后页面滚动条可滚动问题

问题：el-dialog弹框出现后页面纵向滚动条可滚动问题实现效果：当弹框出现后，滚动条不可使用即不可纵向滚动发现问题：在开发中在body元素上添加overfl

素颜马尾好姑娘i/ 2023年02月13日 00:23/ 0 赞/ 23 阅读

相关小程序弹出层禁止页面滚动

解决办法：在弹出层上添加 catchtouchmove=’true’ <view class="sh_Model_box" catchtouchmove='tr

古城微笑少年丶/ 2022年11月25日 10:26/ 0 赞/ 199 阅读

相关 vue js页面滚动到最底部

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ODM4

向右看齐/ 2022年10月22日 04:30/ 0 赞/ 245 阅读

相关 vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决

> 弹出层时，蒙版下还可以滚动页面移动端 > 在蒙层所在div上加 `@touchmove.prevent` <div class="maskBox" @t

短命女/ 2022年10月16日 02:59/ 0 赞/ 272 阅读

相关解决：JS 弹层后底部页面可以滚动、vue 弹出框后面页面可以滚动（web端）

做web端项目过程中，发现点击弹窗后，弹窗后面的页面还可以滚动。复现如下： ![在这里插入图片描述][20210629131003501.gif_pic_center]

柔情只为你懂/ 2022年10月11日 00:48/ 0 赞/ 469 阅读

相关 JSP/HTML页面弹出框

需求：项目中要求点击某个按钮，弹出一个对话框，输入数据，提交。首先来分析一下，在A页面输入N多数据，然后点击提交按钮，弹出一个新的对话框B，对话框B里也要输入N多数据，在

怼烎@/ 2022年07月15日 14:54/ 0 赞/ 343 阅读

相关前端页面弹框遮罩禁止页面滚动

前端页面弹框遮罩禁止页面滚动前端开发经常会遇到的一个问题就是制作一个弹框来向用户提示信息，在这个弹框弹出的同时，往往会伴有一个灰色的遮罩层挡住页面内容，同时整个页面被这

深藏阁楼爱情的钟/ 2022年06月13日 08:36/ 0 赞/ 726 阅读

相关弹出层随屏滚动

一、层跟随屏幕滚动 <div style="width:120px;height:120px;border:1px solid red; position:ab

桃扇骨/ 2022年06月07日 06:24/ 0 赞/ 239 阅读

相关 vue项目中禁止页面滚动 / 滚动事件穿透 (弹出蒙版时，弹出层下面还可以滚动)

vue项目中禁止页面滚动 / 滚动事件穿透移动端解决方案 PC端解决方案 vue项目中弹出层时，蒙版下还可以滚动页面。

雨点打透心脏的1/2处/ 2022年01月31日 12:51/ 0 赞/ 713 阅读

相关解决移动端，模态框、弹框滑动滚动，底部页面随着滑动、穿透的问题

移动端有个比较头疼的问题，就是在模态框、弹框中滑动，底部页面也随着滑动的问题。本文将从触摸事件、点击事件的顺序来解决这个问题。首先我们要明白 touch 和click

亦凉/ 2021年09月18日 01:12/ 0 赞/ 585 阅读