转~ 移动端滚动穿透问题完美解决方案

<tr class="li1">
<td class="ln"><pre class="de1">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

年月日 目录 问题 css 之 overflow hidden js 之 touchmove preventDefault 解决方案 position fixed document. 参考 问题 ? 众所周知，移动端当有 fixed 遮罩背景和弹出层时，在屏幕上滑动能够滑动背景下面的内容，这就是臭名昭著的滚动穿透问题 ? 之前搜索了一圈，找到下面两种方案 ? css 之 overflow hidden ? SCSS .open ? body ? ? overflow hidden ? ? height ? 页面弹出层上将 .open 添加到 html 上，禁用 html 和 body 的滚动条 但是这个方案有两个缺点： ? 由于 html 和 body的滚动条都被禁用，弹出层后页面的滚动位置会丢失，需要用 js 来还原 页面的背景还是能够有滚的动的效果 js 之 touchmove preventDefault ? JavaScript modal. e ? e. 这样用 js 阻止滚动后看起来效果不错了，但是也有一个缺点： ? 弹出层里不能有其它需要滚动的内容（如大段文字需要固定高度，显示滚动条也会被阻止） 上面两个方案都有缺点，今天用英文关键字 google 了一下，才发现原来还有更好的方案 ? 解决方案 position fixed ? CSS body.open ? ? position fixed ? ? width 如果只是上面的 css，滚动条的位置同样会丢失 所以如果需要保持滚动条的位置需要用 js 保存滚动条位置关闭的时候还原滚动位置 ? JavaScript ModalHelper bodyCls ? scrollTop ? ? ? afterOpen ? ? ? scrollTop document.. ? ? ? document...bodyCls ? ? ? document... scrollTop ? ? ? ? beforeClose ? ? ? document...bodyCls ? ? ? ? ? ? document.. scrollTop ? ? ? 这样上面个缺点都解决了，至此滚动穿透就完美解决了 ? 完整的示例 ? document. ? 因为浏览器获取和设置 scrollTop 存在兼容性，为了简化上面的示例，我直接使用了 document. 这个新标准，对于不支持的浏览器我写了个 polyfill document.. ? ? ``` ? document. ? element ? scrollingElement ? ? element ? ? ? element ? ? document.. ? ? ? 0 ? ? ? element document. ? ? ? ? iframe document. ? ? iframe.. ? ? document..iframe ? ? doc iframe.. ? ? doc.

' ? ? doc. ? ? isCompliant doc.. doc.. ? ? iframe..iframe ? ? element isCompliant document. document. ? ? .document ? ? scrollingElement ? ```（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

<table class="javascript">