vue遮罩层如何阻止滚动
目录
- vue遮罩层阻止滚动
- vue解决遮罩层滚动方法
vue遮罩层阻止滚动 给vue用fixed定位加一个遮罩层,滚动鼠标滚轮发现下面一层的页面随之滚动,那么如何阻止下层页面滚动?
我这里给遮罩层加一个取消鼠标滚轮默认行为的事件
弹框内容
mousewheel(e){e.preventDefault(); }
或者使用vue中提供 @touchmove.prevent 方法可以完美解决这个问题
这会造成一个问题虽然遮罩层滚动问题解决了,但是弹框中的内容要是滚动会间接性的影响到遮罩层的滚动,那么如何解决?
网上查了很多资料,试了一下没有效果,我这里的解决方案是点击详情的时候弹出遮罩层,弹出的时候给body设置overflow:hidden当点击关闭遮罩层时,设置overflow:null
【vue遮罩层如何阻止滚动】代码如下:
// 遮罩层// 弹框内容 (已设置overflow:scroll超出滚动)// 关闭按钮
![]()
文章图片
// 这是列表数据点击时details(e){this.dts=ethis.show=!this.showvar body = document.getElementsByTagName('body')[0]console.log(body)body.style.overflow='hidden'}, // 这是点击关闭按钮时gb(){this.show=!this.showvar body = document.getElementsByTagName('body')[0]console.log(body)body.style.overflow=null}
vue解决遮罩层滚动方法 vue遮罩层阻止默认滚动事件
在写移动端页面的时候,弹出遮罩层后,我们仍然可以滚动页面。
vue中提供 @touchmove.prevent 方法可以完美解决这个问题
或者给不需要滚动的部分加上overflow:hidden属性解决
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
推荐阅读
- vue|vue eslint报错:Component name “xxxxx“ should always be multi-word.eslintvue的4种解决方案
- vue请求接口并且携带token的实现
- 直播类app如何进行人群定位
- 如何组装一个注册中心
- 单元测试|如何写Java单元测试
- 单元测试|什么是单元测试,如何去写一个单元测试
- 内容付费进入“瓶颈”,将如何走向正途
- 从零开始搭建Vue2.0项目(一)之快速开始
- 详解异步任务 | 看 Serverless Task 如何解决任务调度&可观测性中的问题
- 投稿|沉迷“夏日祭”,B站如何被二次元“绑架”