vue滚动条禁止_vue中实现禁止浏览器滚动方法

大家好，本次在开发项目中，点击按钮，弹出一个自定义的弹出窗口和遮罩层，因为页面的超出一屏，有滚动条，但是想让弹出窗时候，禁止浏览器滚动，那么就简单写一个方法给大家。

首先，我们打开我们的txt文本，开始敲代码吧！

嗯... 算了，不装逼了，还是打开代码编辑器吧！

思路是这样的，当弹窗弹出时候，让body overflow: hidden; 超出隐藏，当取消弹窗时候，再让 overflow: visible; 恢复默认值即可。

在vue项目中，src文件中，自行新建js文件 tp-scroll.js，将下放代码放入export default {

// 允许页面滚动

AddScroll () {

document.body.style.overflow = "visible";

// 禁止页面滚动

RemoveScroll () {

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

}

然后，可以在main.js中全局引入，也可以哪个组件用，哪个组件引用，如下

在组件js中引入 import TpScroll from '@/assets/resource/tp-scroll.js'

然后使用

清除禁止滚动，恢复默认TpScroll.AddScroll();

禁止滚动TpScroll.RemoveScroll();

例如，我们在弹窗弹出时候，执行禁止滚动，关闭弹窗时候，执行恢复默认即可。

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓

vue滚动条禁止_vue中实现禁止浏览器滚动方法相关推荐

vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...
加载vue文件步骤_vue中.vue文件解析步骤详解
这次给大家带来vue中.vue文件解析步骤详解,vue中.vue文件解析的注意事项有哪些,下面就是实战案例,一起来看一下. 我们平时写的 .vue 文件称为 SFC(Single File Compo ...
vue 倒计时插件_vue中实现倒计时组件与毫秒效果
时分秒倒计时组件 template {{ getHours1 }} {{ getHours2 }} : {{ getMinutes1 }} {{ getMinutes2 }} : {{ getSeco ...
vue导入swiper_vue项目中导入swiper插件的方法
这篇文章主要为大家详细介绍了vue项目中导入swiper插件的方法,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 版本选择 swiper是个常用 ...
vue 字典配置_vue遍历数据及字典的方法
数组:数值 {{ item.message }} 数组:数值加索引 {{ item.msg }} {{index}} 字典:key value index {{ value }} {{key}} {{ ...
echarts vue 柱状图实例_VUE中使用Echarts绘制柱状图
在main.js中引入echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 在相应的vue中导入echarts ...
axios vue 回调函数_vue中ajax请求与axios包完美处理
这次给大家带来vue中ajax请求与axios包完美处理,vue中ajax请求与axios包处理的注意事项有哪些,下面就是实战案例,一起来看一下. 在vue中,经常会用到数据请求,常用的有:vue-r ...
vue数组刷新_Vue中数组更新后，页面没有动态刷新问题
最近使用vue开发时,在一个函数中使用for循环,改变了页面中的数组,在函数中查看是修改成功的,但是页面中没有动态刷新. 在Vue的官方文档有提到这样一个注意事项: 数组变更检测注意事项: 由于 Ja ...
echart vue 图表大小_vue中echarts图表大小适应窗口大小且不需要刷新案例
我就废话不多说了,大家还是直接看代码吧~ 内容如下: // 基于准备好的dom,初始化echarts实例 let myChart = this.$echarts.init(document.getEl ...

vue滚动条禁止_vue中实现禁止浏览器滚动方法

vue滚动条禁止_vue中实现禁止浏览器滚动方法相关推荐

最新文章

热门文章