Vue出现弹出层时，禁止底部页面跟随滑动

背景：最近在写一个vue项目，当出现弹出层时，发现底部页面跟随滚动，但是产品不想要这种效果，于是找各种资料，发现很多说法，但是试了试，发现有的根本就不行，比如说有人提出用vue中提供的@touchmove.prevent方法来解决，但是我试了没起作用，或者@touchmove.prevent.stop也不起作用。下面是几种可以解决问题的方式，仅供参考：

1.在有弹出框的页面中，加上以下方法，弹出框出现时调用禁止滚动方法stopScroll()，弹出框去掉是调取允许滚动方法canScroll()即可，代码如下：

methods : {//禁止滚动stopScroll(){var mo=function(e){e.preventDefault();};document.body.style.overflow='hidden';document.addEventListener("touchmove",mo,false);//禁止页面滑动},/***取消滑动限制***/canScroll(){var mo=function(e){e.preventDefault();};document.body.style.overflow='';//出现滚动条document.removeEventListener("touchmove",mo,false);}
}

2.在全局js即main.js中，设置全局函数，在使用到的页面分别调用即可，代码如下：

//弹出框禁止滑动
Vue.prototype.stopScroll = function () {var mo = function (e) { e.preventDefault() }document.body.style.overflow = 'hidden'document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}//弹出框可以滑动
Vue.prototype.canScroll = function () {var mo = function (e) {e.preventDefault()}document.body.style.overflow = ''// 出现滚动条document.removeEventListener('touchmove', mo, false)
}

具体页面的调用方法如下：

 //当需要禁止弹出框底部内容滑动时调用：this.stopScroll()//当需要页面恢复滑动功能时调用：this.canScroll()

注：以上方法适用于vue项目的移动端，如果是PC，等我写到继续完善，或者大牛可以直接评论区留下你的方法，哈哈。

Vue出现弹出层时，禁止底部页面跟随滑动相关推荐

JQuery弹出菜单时禁止页面（body）滚动
最近在做手机端的弹出菜单,但是菜单弹出来后滑动手机屏幕的话页面滚动总是会将菜单滑上去,体验非常不好,所以查了一下弹出菜单时禁止页面滚动的方法,整理如下: 方法一:弹出菜单时给body和html添加一个 ...
html弹出层全覆盖滚动条,JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
一.去除滚动条方法给body添加overflow:hidden属性即可,IE6.7下不会生效,需要给html增加overflow:hidden属性样式中需要对IE6.7及其它浏览器用hack辨别, ...
微信小程序自定义弹出模态框禁止底部滚动
图示: wxml代码: <view class='fix_bottom'> <view>分享</view> <view>电话咨询</view> ...
js怎么给div加滑动条 vue给弹出层加滑动条(一分钟学会用js加滚动条)
@[TOC](怎么给div加滑动条给弹出层加滑动条(一分钟学会js加滚动条)) 给div加滑动条给需要滑动条的div加一个样式加一个高度,加一个overflow:auto; overflow:a ...
uniapp 自定义弹层时，底部页面滚动而弹层不能滚动
今天做页面有个需求: 页面有个列表(A),内容过多时需要滚动, 然后做了个弹层,里面也有个列表(B),内容过多时需要滚动由于A列表使用的web-view组件,而B列表使用view组件加overflo ...
java怎么让遮罩层下面滚动_vue项目弹出层后禁止body底层的滚动事件
1.新建utils/modalHelper.js文件 // 解决遮罩层滚动穿透问题,分别在遮罩层弹出后和关闭前调用 let _scrollTop class ModalHelper { // popu ...
js实现弹出框时禁止页面滚动，关闭弹出框时恢复页面滚动
$(function () {$('#pingtai').click(function () {if($('#serviceDes').css('display','none')){$('#servi ...
css PC端弹窗时禁止底部页面滚动
代码: <script> export default {name: "",data () {return {showDlg: false}},watch: {},cr ...
WeChat------小程序弹窗开启时禁止底部页面滚动
最近在做微信小程序的开发,涉及到自定义弹窗,然而当我的表单页面过长,同时自定义弹窗也过长,即两者都需要滚动的时候,问题出现了: 问题:当我滚动弹出窗页面时,会导致后面的页面也出现滚动的表现: ...

Vue出现弹出层时，禁止底部页面跟随滑动

Vue出现弹出层时，禁止底部页面跟随滑动相关推荐

最新文章

热门文章