关于移动端弹层下的body滚动
关于移动端弹层下的body滚动
这个问题在移动端挺常见的,网上也有一些解决方法,现在笔者来总结一下:css的解决方案都有兼容问题,js是比较稳定的解决方法(虽然比较麻烦)
ps: 本文的例子都是用vue写的
关于css的解决方案
1. overflow:hidden;
这是最多人开始想到的解决方法,虽然在pc端可以解决问题,但在移动端是不行的,
但有人说在html,body同时设置overflow:hidden可以,但经测试,效果不啥的。。。
在安卓上勉强还行,但会有一卡一卡的效果,ios上直接不行。用手机查看例子.
// vue
watch:{
showMark:function(val){
if(val){
document.body.style.overflow = 'hidden';
document.documentElement.style.overflow = 'hidden';
}else{
document.body.style.overflow = 'auto';
document.documentElement.style.overflow = 'auto';
}
}
}
2.position:fixed
这个方法比上一个方法好多了,经测试,安卓上运行良好,ios上的微信浏览器也可以
但设置body为fixed定位的同时,滚动的位置为跳回顶部。貌似可以用这个?
嗯,如果你不介意页面弹回顶部的话,但我想在复杂的页面上估计会有小问题,特别在body上用到transform的时候,fixed会有奇怪的bug。用手机查看例子
// vue
watch:{
showMark:function(val){
if(val){
document.body.style.position = 'fixed';
}else{
document.body.style.overflow = 'static';
}
}
}
3. pointer-events: none;
嗯,别用这个,试过在弹层上使用这个样式,无效,在body上才行,但会把touch事件都去掉。。。
用手机查看例子
关于js的解决方案
当弹层的元素不需要滚动的情况
嗯,这种情况就好办,直接阻止在弹层上touchmove事件。用手机查看例子
// vue下,直接加一个@touchmove.prevent
// 用原生js,则统一给一个class元素添加touchmove事件,并阻止默认行为
// 这里使用了jquery
$('.stop-scroll').on('touchmove',function(e){
e.preventDefault();
})
当弹层的元素需要滚动的情况
嗯,这种情况就复杂了,需要自己模拟一个滚动的效果,你可以自己找一个合适的插件,或者参考一下笔者的插件touchScroll.js,又或者你自己动手写一个适合项目的插件。用手机查看例子
// touchScroll.js初始化(vue)
mounted(){
this.touchScroll = new TouchScroll({
target: this.$refs.content, //模拟滚动的对象
des:'y',//x,y
noScrolls: [this.$refs.mark] //不需要滚动的对象列表
});
},
watch:{
showPupop(val){
if(val){
// 打开弹层获取高度
this.touchScroll.start();
}else{
// 关闭弹窗重置
this.touchScroll.reset();
}
}
}