小程序弹出层滚动穿透问题---史上最简单写法(附加解决方案)
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序弹出层滚动穿透问题---史上最简单写法(附加解决方案)相关的知识,希望对你有一定的参考价值。
参考技术A 通过动态改变 height属性值 实现。overflow:hidden;也需当弹出层 方法执行时,改变myheight 的值
当隐藏的时候,修改 myheight 的值
参考原文自: http://blog.csdn.net/qq_33802316/article/details/775061710
vue中禁止页面滚动/滚动事件穿透-弹出蒙版时弹出层下面还可以滚动问题解决
弹出层时,蒙版下还可以滚动页面
移动端
在蒙层所在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
是肯定不行的。
以上是关于小程序弹出层滚动穿透问题---史上最简单写法(附加解决方案)的主要内容,如果未能解决你的问题,请参考以下文章