分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow
也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！
相信大家在做移动端开发的时候会经常遇到这种场景，需要适时的弹出遮罩（有时为了突出还会在外面加上蒙层），弹窗出现以后，为了追求良好的用户体验，遮罩以下的屏幕是禁止滑动的。在网上找了很多资料，大体就这两种做法，但都有不完善的地方。加上自己的思考和总结，想到一个办法，应该可以解决你的问题。
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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
|
<!
doctype
html>
<
html
lang="en">
<
head
>
<
meta
charset="UTF-8" />
<
meta
name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<
title
>Document</
title
>
<
script
src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></
script
>
<
style
type="text/css">
* {
padding: 0px;
margin: 0px;
}
body {
height: 1000px;
}
#mask {
top: 0px;
left: 0px;
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: none;
}
#mask .div {
width: 300px;
height: 300px;
background: white;
position: absolute;
margin: auto;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
</
style
>
<
script
type="text/javascript">
$(function() {
/* 第一种方法：屏蔽鼠标滚轮滚动和touchmove事件，比较暴力
$("#cao").click(function() {
$("#mask").show(0,function(){
$("body").css('overflow','hidden');
});
})
$("#close").click(function() {
$("#mask").hide(0,function(){
$("body").css('overflow','scroll');
});
})
*/
//第二种方法[推荐]，屏蔽触屏滑动事件，但是没有屏蔽鼠标滚轮滚动
|
扫一扫
1073
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
