-
Notifications
You must be signed in to change notification settings - Fork 661
/
hiddenByFixedParent.html
91 lines (77 loc) · 2.92 KB
/
hiddenByFixedParent.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
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no">
<title></title>
<style>
body {
width: 3000px;
height: 3000px;
}
#target1 {
position: absolute;
left: 500px;
top: 500px;
width: 200px;
height: 200px;
background-color: red;
}
#target2 {
position: absolute;
left: 2500px;
top: 2500px;
width: 200px;
height: 200px;
background-color: blue;
}
.fixed-bottom {position:fixed; bottom:0; left:0; right: 0; height: 125px; background-color: rgba(244, 244, 50, 0.5)}
.fixed-right {position:fixed; top:0; bottom:0; right: 0; width: 150px; background-color: rgba(244, 244, 50, 0.5)}
.fixed-top {position:fixed; top:0; left:0; right: 0; height: 75px; background-color: rgba(244, 244, 50, 0.5)}
.fixed-left {position:fixed; top:0; bottom:0; left: 0; width: 100px; background-color: rgba(244, 244, 50, 0.5)}
</style>
</head>
<body>
<div id="target1" onclick="window.target1Clicked = true"></div>
<div id="target2" onclick="window.target2Clicked = true"></div>
<div class="fixed-bottom" onclick="throw new Error('Misplaced click')"></div>
<div class="fixed-right" onclick="throw new Error('Misplaced click')"></div>
<div class="fixed-top" onclick="throw new Error('Misplaced click')"></div>
<div class="fixed-left" onclick="throw new Error('Misplaced click')"></div>
<script>
const userAgent = window.navigator.userAgent.toLocaleLowerCase();
const isIOS = /(iphone|ipod|ipad)/.test(userAgent);
// NOTE: Try to avoid odd scrolls in iOS on sauceLabs
if (isIOS) {
const nativeMethods = window['%hammerhead%'].nativeMethods;
const originWindowScrollTo = nativeMethods.scrollTo;
let lastScrollTop = window.scrollY;
let lastScrollLeft = window.scrollX;
nativeMethods.scrollTo = function () {
lastScrollLeft = arguments[0];
lastScrollTop = arguments[1];
originWindowScrollTo.apply(window, arguments);
};
window.addEventListener('scroll', function () {
if (window.scrollX !== lastScrollLeft || window.scrollY !== lastScrollTop)
window.scrollTo(lastScrollLeft, lastScrollTop);
});
Object.defineProperty(document.body, 'scrollTop', {
get: function () {
return window.scrollY;
},
set: function (y) {
window.scrollTo(window.scrollX, y);
}
});
Object.defineProperty(document.body, 'scrollLeft', {
get: function () {
return window.scrollX;
},
set: function (x) {
window.scrollTo(x, window.scrollY);
}
});
}
</script>
</body>
</html>