[置顶] 禁止遮罩层以下屏幕滑动
2016-09-21 23:40
141 查看
相信大家在做移动端开发的时候会经常遇到这种场景,需要适时的弹出遮罩(有时为了突出还会在外面加上蒙层),弹窗出现以后,为了追求良好的用户体验,遮罩以下的屏幕是禁止滑动的。在网上找了很多资料,大体就这两种做法,但都有不完善的地方。加上自己的思考和总结,想到一个办法,应该可以解决你的问题。
一般,大家想到的都是给body或者html添加overflow:hidden样式,当然height要设置成100%。这样在大多数机型上是可以的,但有个别的就是不起作用,我也不知道为什么(求知道的大神告知)。
因为这种需要弹窗遮罩的一般为移动端,pc很少会出现,就算是在pc里面上面那种方法也是可以解决的,所以可以考虑从移动端特有的滑动事件touchmove下手,当弹窗出现以后阻止该事件的默认行为不就行了吗,于是又有了下面的方法。
这种方法在移动端是可以解决滑动的问题,但有种情景就显得有点尴尬了,移动端屏幕本来就小,如果弹窗的内容过多也需要滑动(比如很长的活动规则),因为弹窗出现的时候已经禁止了滑动事件,那可如何是好????
在这种情形之下我想到了另外一种完美的办法,就是在禁止滑动之前先做一下判断,如果是在弹窗中触发的滑动事件就不阻止默认行为,其他地方同上。判断那部分我是通过类名判断的,通过其他的方法也是可以的(比如id),具体如下:
上面的类名shadeBox是弹窗的蒙层的类名。也就是在蒙层上面滑动,事件是被禁止的,剩下的一部分就是弹窗了,所以弹窗的内容可以滑动。
以上有什么说的不对的,或者第三种方法还有不试用的情景的,还望指出,大家共同学习进步\(^o^)/~
更新说明:
当我把这个东西分享给身边人用的时候,最后还是发现了问题,果然群众的眼睛还是雪亮的。问题如下:
当弹框内容过多,弹框也需要滑动的时候,因为弹框内部没有禁止touchmove,所以是可以滚动的,问题是当滚动到最底部继续往下滑的时候,奇怪的事情就发生了,此时页面还是会发生滑动,(在最上面的时候和这道理一样)。
我想的是可能弹框内部touchmove冒泡,然后到body上发生滑动。于是在弹框内部组织冒泡不就行了,于是做如下调整:
修改以后,发现然并卵。。。
不知道为什么弹框内部并没有组织touchmove的冒泡,好奇怪。求知道的大神不吝告之。
现在的想法是,监听滑动事件,当滑动到底部或者最顶端时,禁止touchmove,并根据手指滑动的方向来释放开touchmove事件,即顶部的时候往下滑是放开事件,最底部的时候向上滑是放开事件。
虽然这边说的简单,但要实现这一功能确实太麻烦,如果只是在h5页面里面,完全没必要花这么多时间和精力在这个上面,如果是APP,追求极致那就另当别论了。
再说上面的情况是弹框内容过多的时候也需要滑动,如果弹框不需要滑动,跳出弹框以后直接全局禁用touchmove就好了,就没有上面的问题了。
不知道还有没有更好的做法?????
参考链接:http://www.cnblogs.com/gaohui/p/5819777.html
此时屏蔽滚动和PC鼠标滚动,比较暴力!!!!
a)大众型
一般,大家想到的都是给body或者html添加overflow:hidden样式,当然height要设置成100%。这样在大多数机型上是可以的,但有个别的就是不起作用,我也不知道为什么(求知道的大神告知)。
b)高端型
因为这种需要弹窗遮罩的一般为移动端,pc很少会出现,就算是在pc里面上面那种方法也是可以解决的,所以可以考虑从移动端特有的滑动事件touchmove下手,当弹窗出现以后阻止该事件的默认行为不就行了吗,于是又有了下面的方法。1 $(document).on("touchmove",function(e) { 2 e.preventDefault(); 3 })
这种方法在移动端是可以解决滑动的问题,但有种情景就显得有点尴尬了,移动端屏幕本来就小,如果弹窗的内容过多也需要滑动(比如很长的活动规则),因为弹窗出现的时候已经禁止了滑动事件,那可如何是好????
c)改进型
在这种情形之下我想到了另外一种完美的办法,就是在禁止滑动之前先做一下判断,如果是在弹窗中触发的滑动事件就不阻止默认行为,其他地方同上。判断那部分我是通过类名判断的,通过其他的方法也是可以的(比如id),具体如下:$(document).on("touchmove",function(e) { if(e.target.className.indexOf("shadeBox") >= 0) { e.preventDefault(); } })
上面的类名shadeBox是弹窗的蒙层的类名。也就是在蒙层上面滑动,事件是被禁止的,剩下的一部分就是弹窗了,所以弹窗的内容可以滑动。
以上有什么说的不对的,或者第三种方法还有不试用的情景的,还望指出,大家共同学习进步\(^o^)/~
更新说明:
当我把这个东西分享给身边人用的时候,最后还是发现了问题,果然群众的眼睛还是雪亮的。问题如下:
当弹框内容过多,弹框也需要滑动的时候,因为弹框内部没有禁止touchmove,所以是可以滚动的,问题是当滚动到最底部继续往下滑的时候,奇怪的事情就发生了,此时页面还是会发生滑动,(在最上面的时候和这道理一样)。
我想的是可能弹框内部touchmove冒泡,然后到body上发生滑动。于是在弹框内部组织冒泡不就行了,于是做如下调整:
$(document).on("touchmove",function(e) { if(e.target.className.indexOf("shadeBox") >= 0) { e.preventDefault(); } else { e.stopPropagation(); } })
修改以后,发现然并卵。。。
不知道为什么弹框内部并没有组织touchmove的冒泡,好奇怪。求知道的大神不吝告之。
现在的想法是,监听滑动事件,当滑动到底部或者最顶端时,禁止touchmove,并根据手指滑动的方向来释放开touchmove事件,即顶部的时候往下滑是放开事件,最底部的时候向上滑是放开事件。
虽然这边说的简单,但要实现这一功能确实太麻烦,如果只是在h5页面里面,完全没必要花这么多时间和精力在这个上面,如果是APP,追求极致那就另当别论了。
再说上面的情况是弹框内容过多的时候也需要滑动,如果弹框不需要滑动,跳出弹框以后直接全局禁用touchmove就好了,就没有上面的问题了。
不知道还有没有更好的做法?????
参考链接:http://www.cnblogs.com/gaohui/p/5819777.html
此时屏蔽滚动和PC鼠标滚动,比较暴力!!!!
相关文章推荐
- 禁止遮罩层以下屏幕滑动
- 禁止遮罩层以下屏幕滑动
- 禁止遮罩层以下屏幕滑动
- 禁止遮罩层以下屏幕滑动----正解(更新版)
- 移动端屏幕禁止滑动
- 移动端 滑动表层div时禁止底层div滑动 就是遮罩层
- 移动端弹出层加遮罩后禁止滑动
- Android Viewpage禁止滑动屏幕
- 移动端禁止遮罩层下面的页面滑动
- 纯原生打造GridView单行横向滑动(宽度自适应在父布局居中),手机屏幕px和dp的互换方法,附禁止滑动的自定义方法
- 移动端屏幕禁止滑动
- [置顶] Android开发禁止首次进入activity弹出软键盘,限制屏幕只能竖屏或者横屏展示
- 如何显示遮罩层时禁止底层页面滑动
- 禁止遮罩的滑动事件
- [置顶] Android 屏幕适配总结
- [Android] 使用Include布局+Fragment滑动切换屏幕
- Android 滑动屏幕效果GestureDetector、OnGestureListener、ViewFlipper
- Android的Activity屏幕切换动画(一)-左右滑动切换overridePendingTransition
- android中禁止GridView上下滑动的方法
- 树莓派显示器电源管理禁止屏幕休眠