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
| 问题：
移动端弹出fixed弹窗的话，在弹窗上滑动会导致下层的页面跟着滚动，这个叫 “滚动穿透”
解决方案：
1.在弹出层的touchmove事件中调用preventDefault
2.body 设置 overflow：hidden （适合PC）
3.css设置
position: fixed;
width: 100%;
js设置
(function(){
var scrollTop = 0;
// 显示弹出层
open.onclick = function(){
// 在弹出层显示之前，记录当前的滚动位置
scrollTop = getScrollTop();
// 使body脱离文档流
document.body.classList.add('dialog-open');
// 把脱离文档流的body拉上去！否则页面会回到顶部！
document.body.style.top = -scrollTop + 'px';
mask.style.display = 'block';
}
// 隐藏弹出层
close.onclick = function(){
mask.style.display = 'none';
// body又回到了文档流中（我胡汉三又回来啦！）
document.body.classList.remove('dialog-open');
// 滚回到老地方
to(scrollTop);
}
function to(scrollTop){
document.body.scrollTop = document.documentElement.scrollTop = scrollTop;
}
function getScrollTop(){
return document.body.scrollTop || document.documentElement.scrollTop;
}
}());
function fixedBody(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.body.style.cssText += 'position:fixed;top:-'+scrollTop+'px;';
}
function looseBody() {
var body = document.body;
body.style.position = '';
var top = body.style.top;
document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top);
body.style.top = '';
}
|
