-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathviewarea.html
57 lines (57 loc) · 1.91 KB
/
viewarea.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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#test {
width: 200px;
height: 200px;
background-color: #f0ff10;
/*position: absolute;
left: 50%;
transform: translateX(-50%);
top: 800px;*/
}
</style>
</head>
<body >
<div style="height: 3000px;"></div>
<div id="test"></div>
<script>
function isElementInViewport(el) {
var rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document. documentElement.clientHeight) && /*or $(window).height() */
rect.right <= (window.innerWidth || document. documentElement.clientWidth) /*or $(window).width() */
);
}
function givenElementInViewport (el, fn) {
return function () {
if (isElementInViewport(el)) {
fn.call();
}
}
}
function addViewportEvent (el, fn) {
if (window.addEventListener) {
addEventListener('DOMContentLoaded', givenElementInViewport(el, fn), false);
addEventListener('load', givenElementInViewport(el, fn), false);
addEventListener('scroll', givenElementInViewport(el, fn), false);
addEventListener('resize', givenElementInViewport(el, fn), false);
} else if (window.attachEvent) {
attachEvent('DOMContentLoaded', givenElementInViewport(el, fn));
attachEvent('load', givenElementInViewport(el, fn));
attachEvent('scroll', givenElementInViewport(el, fn));
attachEvent('resize', givenElementInViewport(el, fn));
}
}
var test = document.querySelector('#test');
addViewportEvent(test,function(){
console.log('轮到我出场了，嘿嘿');
})
</script>
</body>
</html>