vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
发布于2021-05-30 07:20 阅读(1862) 评论(0) 点赞(25) 收藏(3)
弹出层时，蒙版下还可以滚动页面
移动端
在蒙层所在div上加
@touchmove.prevent
<div class="maskBox" @touchmove.prevent></div>PC端
弹层显示时调用 stopMove()停止页面滚动，弹层消失时调用 Move()开启页面滚动
- //停止页面滚动
- stopMove(){
- let m = function(e){e.preventDefault();};
- document.body.style.overflow='hidden';
- document.addEventListener("touchmove",m,{ passive:false });//禁止页面滑动
- },
- //开启页面滚动
- Move(){
- let m =function(e){e.preventDefault();};
- document.body.style.overflow='';//出现滚动条
- document.removeEventListener("touchmove",m,{ passive:true });
- }
vue封装
- directives: {
- fixed: {
- // inserted 被绑定元素插入父节点时调用
- inserted () {
- let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
- document.body.style.cssText += 'position:fixed;width:100%;top:-' + scrollTop + 'px;'
- },
- // unbind 指令与元素解绑时调用
- unbind () {
- let body = document.body
- body.style.position = ''
- let top = body.style.top
- document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top)
- body.style.top = ''
- }
- }
- },
自定义指令使用
- <div v-if="isShowRecordModal" v-fixed>
- ....
- ....
- </div>
该指令的注意点是必须使用
v-if来开启关闭弹窗，因为该指令依赖于dom的插入和注销，使用v-show是肯定不行的。
原文链接:https://blog.csdn.net/JackieDYH/article/details/117296109
所属网站分类: 技术文章 > 博客
作者：Hggh
链接：http://www.qianduanheidong.com/blog/article/115838/b0dff97fd723585bb9bb/
来源：前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容：(最多支持255个字符)
---无人问津也好，技不如人也罢，你都要试着安静下来，去做自己该做的事，而不是让内心的烦躁、焦虑，坏掉你本来就不多的热情和定力