<table class="javascript">
<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
``` 原文链接：https://www.f2er.com/note/421008.html
