vue 弹窗禁止底层滚动

原因:底层视图高度超出百分百,加入弹窗后再苹果浏览器隐藏上下栏的情况下遮罩层没有完全遮住底层。

处理:打开弹窗后禁止底层滚动调用stop事件,关闭则开启底层滚动调用move事件。

let mo=function(e){e.preventDefault();};

stop(){
document.body.style.overflow=‘hidden‘;
document.body.style.position=‘fixed‘;
document.body.style.width=‘100%‘;
document.addEventListener("touchmove",mo,false);//禁止页面滑动
},
move(){
document.body.style.overflow=‘‘;//出现滚动条
document.body.style.position=‘initial‘;
document.body.style.height=‘1006px‘;
document.removeEventListener("touchmove",mo,false);
},

参考相关来源:

https://www.cnblogs.com/fanbi/p/9648184.html

https://blog.csdn.net/m0_37852904/article/details/79300719

原文地址:https://www.cnblogs.com/min77/p/10335360.html

时间: 2025-01-23 13:35:44

vue 弹窗禁止底层滚动的相关文章

modal 弹出层后禁止底层滚动

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

写弹窗时防止底层滚动

//防止底层滚动 $(".pop-wraper").on("touchmove",function(){ event.preventDefault(); });

移动端禁止屏幕滚动

//禁止屏幕滚动 $("body").attr({ "ontouchmove": "event.preventDefault()" }); //解除禁止 $("body").removeAttr("ontouchmove");

原生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

vue如何禁止弹窗后面的滚动条滚动?

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

vue页面禁止蒙层底部滚动

函数名 popupVisible,我是把这个方法放到vuex里面, 滚动高度用变量top表示 state: { pageLoad: !0, top: 0, // 页面滚动的高度 }, popupVisible(state, newValue) { if (newValue) { // 页面固定 state.top = window.scrollY; console.log("true--state.top", state.top); document.body.style.positi

移动端在有弹出层时如何禁止底层的滚动 (实现表层滑动的时候,底层禁止滑动,表层隐藏的时候,底层依然可以滑动);

要实现以上图示的功能;自然想到zepto里的swipeUp方法,但是用了以后发现,有的移动端浏览器,不起作用,有的浏览器起作用,但是底层也会跟着滑动; 于是加一下代码: document.addEventListener('touchmove', function (event) { event.preventDefault(); }, false); 加了以后上滑表层的页面,底层的页面不会跟着滚动了,但是表层页面隐藏以后,底层的页面就滑不动了; 于是下面一段代码就出现了,完美解决; docum

自己动手丰衣足食,h5手机端jquery弹窗插件(事件冒泡、单例模式、遮盖部分禁止默认滚动)

感谢浏览,欢迎交流=.= 公司开发微信网页多处需要使用弹窗,使用jquery-ui的定制化下载仍需要150多kb,想来有些奢侈(最终下来只有11kb,压缩后2kb,啊,我的神), 手机端弹窗方式与pc端有些不同,而且手机上有一个弹窗出来滚动跟父页面滚动相互影响的问题, 于是决定写一个插件,专门对付手机网页的弹窗. 弹窗的mask和dialog两部分都做成了position=fixed,比较喜欢这种效果,并且屏蔽了被遮住部分的滚动. 几处认为需要留意的知识点或困难点: 1.事件冒泡: e.prev