vue页面有弹层,禁止页面滚动

 1 var preD = function (e) {
 2     e.preventDefault()
 3 }
 4 export default {
 5     data () {
 6         return {
 7         popupStatus: false
 8     }
 9     },
10     watch: { // 监听data中弹层状态
11         popupStatus (val) {
12             if (val) {
13             document.body.style.overflow = ‘hidden‘
14             document.addEventListener(‘touchmove‘, preD, {passive: false}) // 禁止页面滑动
15         } else {
16             document.body.style.overflow = ‘‘ // 出现滚动条
17             document.removeEventListener(‘touchmove‘, preD, {passive: false})
18         }
19         }
20     }
21 }                    

原文地址:https://www.cnblogs.com/223zzm/p/11258986.html

时间: 2024-08-24 21:04:38

vue页面有弹层,禁止页面滚动的相关文章

小程序遮罩层禁止页面滚动(遮罩层内部可以滚动)

wxml //使用scroll-view包裹 scrolly-y要写 [scroll-view scroll-y class="mask-box" catchtouchmove='ture'] [view class="box"] [view] [scroll-view] wxss //样式 .mask-box{ width: 300rpx; height: 300rpx; position: fixed; top: 50%; left: 50%; margin-t

HTML JS 弹层后底部页面禁止滚动处理

1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动: 在调用显示层时加上这句js代码就可以了: document.documentElement.style.overflow = "hidden"; 关闭层的时间别忘了在加上这句: document.documentElement.style.overflow = ""; 2.设置滚轮原来位置 var top_temp = $(document).scrollTop()||document.documentElement

关于禁止页面滚动的实践(禁止滚轮事件)

禁止网页页面滚动只需要给document添加onmousewheel事件,然后在事件绑定函数当中设置e.preventDefault()就可以了,没错,就是芥末简单. 可是问题又来了,首先,onmousewheel是什么事件呢?它又有什么兼容性上的问题呢? 带着以上的两个问题,我通过查阅资料并且通过实践,得到了一下的认识. 1.onmousewheel是页面滚动事件,与onscroll不同的是,一般我们是通过onscroll来获取页面的滚动高度,然后添加相应的高度. 而onmousewheel,

modal 弹出层后禁止底层滚动

看到一篇不错的介绍由弹出层引发对滚动原理的讨论 亲自实验的时候各种坑,都知道在web上处理很简单: html, body{ overflow: hidden; } 1.这样只能解决web上的问题,移动端不管用 2.这样处理仍然会有一些页面宽度适配问题 因为我用在微信公众号开发上(移动端),所以找移动端解决方案, 大部分回答是在弹出层弹出的时候禁用掉触摸事件,弹出层消失的时候再把事件加上: // 记录原来的事件函数,以便恢复 var oldonwheel, oldonmousewheel, old

JS通过设置cookie来控制弹出层,首次打开页面显示弹出层

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>JS通过设置cookie来控制弹出层,首次打开页面显示弹出层,刷新页面不再显示:关闭浏览器重新打开.清除缓存cookie显示.</title&

H5禁止页面滑动/滚动

禁止页面滚动--完美解决方案,滚动条显示与否,手持设备兼容与否 禁止页面滚动 有三种方法 1,依靠css 将页面 document.documentElement.style.overflow='hidden'; document.body.style.overflow='hidden';//手机版设置这个. 如果设置了如上,页面的滚动条将会消失,此时鼠标滚轮失效. 但是 你用键盘的 上下左右键,你会发现,页面仍然可以滚动. 别着急 往下看 2,在 1 的基础上 添加 js功能 var move

原生js禁止页面滚动

// 开启.禁止页面滚动 bodyScroll: { e(e) { e.preventDefault();// 注意此处代码片段必须这样提出来已保证传入下边两个事件的处理程序一样才生效,分别写到事件处理程序中不生效. }, // 开启滚动 open() { document.body.removeEventListener('touchmove', this.e, false); }, // 禁止滚动 close() { document.body.addEventListener('touch

微信小程序实现(禁止页面滚动、长按复制)

1. 禁止页面滚动对于小程序某些一屏的页面,特别是全屏的swiper,并不希望页面在竖直方向上可以滚动. 实现方式:在需要禁止滚动页面的json中加入: "disableScroll": true 1 注意:只在页面配置中有效,无法再app.json中设置该项 参考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#页面配置 2. 长按复制 <text class='copy_conten

实现移动端弹出层弹出的时候页面不能滑动,关闭弹出层时页面恢复滑动

思路是:显示弹层时,禁用触摸事件 在你显示弹出框的时候:添加: function ShowDiv() { window.ontouchmove = function(e) { e.preventDefault && e.preventDefault(); e.returnValue = false; e.stopPropagation && e.stopPropagation(); return false; } } 在关闭弹层时,添加: function CloseDiv