vue弹窗后如何禁止滚动条滚动的问题
作者：星屿H
还在为弹出框出现时页面依然滚动而烦恼吗？本文手把手教你用stopScroll和canScroll方法轻松控制页面滚动,包括在全局main.js中设置函数和具体页面调用的详细代码,让你的前端交互更流畅,用户体验瞬间提升
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)
}3、具体页面的调用
方法如下：
//当需要禁止弹出框底部内容滑动时调用： this.stopScroll() //当需要页面恢复滑动功能时调用： this.canScroll()
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。