-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
133 lines (121 loc) · 4.06 KB
/
index.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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Scrollzzz | Unobserve</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
<link rel="stylesheet" href="../main.css" />
<style>
.box {
width: 400px;
height: 600px;
margin-left: 2rem;
margin-top: 35vh;
text-align: center;
border: 1px solid grey;
}
.box:last-child {
margin-bottom: 60vh;
}
</style>
</head>
<body>
<nav>
<h1><a href="https://github.com/pldg/scrollzzz">Scrollzzz</a></h1>
<ul>
<li><a href="../">Basic</a></li>
<li><a href="../overlap/">Overlap</a></li>
<li><a href="./">Unobserve</a></li>
<li><a href="../change-root/">Change Root</a></li>
<li><a href="../progress/">Progress</a></li>
<li><a href="../progress-overlap/">Progress Overlap</a></li>
<li><a href="../multiple-triggers/">Multiple Triggers</a></li>
</ul>
</nav>
<div class="subtitle">
<h2><a href="https://github.com/pldg/scrollzzz/tree/master/docs/unobserve/index.html">Unobserve</a></h2>
<p>open console - scroll up and down - inspect source code</p>
</div>
<div class="boxes">
<div class="box box1">
<p>box1</p>
</div>
<div class="box box2">
<p>box2</p>
</div>
</div>
<div class="buttons">
<button class="trigger">Update trigger</button>
<button class="add-box">Append new box</button>
</div>
<!-- Polyfill for IntersectionObserver -->
<script
src="https://polyfill.io/v3/polyfill.min.js?flags=gated&features=IntersectionObserver%2CIntersectionObserverEntry"></script>
<script src="../scroll-interactions.iife.js"></script>
<script>
var triggerBtn = document.querySelector('.trigger');
var addBoxBtn = document.querySelector('.add-box');
var observe_box = scroll_interactions({
targets: '.box',
trigger: 0.5,
unobserve: 'intersect',
debug: true
});
observe_box
.init()
.observe(function (res) {
var direction = res.direction;
var position = res.position;
var entry = res.entry;
var isIntersecting = entry.isIntersecting;
var target = entry.target;
var box = target.classList[1];
console.log(
'observe =>',
// Target element
'target:' + box,
// Scroll direction
'direction:' + direction,
// Element position relative to the trigger
'position:' + position
);
if (isIntersecting) {
target.style.backgroundColor = 'burlywood';
console.log('unobserve target:' + box);
} else {
target.style.backgroundColor = 'darkgrey';
}
});
triggerBtn.addEventListener('click', function () {
observe_box.update({ trigger: 0.3 });
});
addBoxBtn.addEventListener('click', function () {
createBox();
// Re-init observe_box on DOM changes
//
// Note: you can also use `update({}, true)` if you want to empty the
// cache, doing so will let scrollzzz re-observe also the targets that has
// been previously unobserved (read API for more info)
observe_box.update();
});
var boxNumber = 3;
function createBox() {
var boxes = document.querySelector('.boxes');
var box = document.createElement('div');
var p = document.createElement('p');
var boxName = 'box' + boxNumber;
box.style.height = '600px';
box.style.width = '400px';
box.style.marginTop = '30vh';
box.setAttribute('class', 'box ' + boxName);
boxes.appendChild(box);
p.textContent = boxName;
box.appendChild(p);
boxNumber += 1;
}
</script>
</body>
</html>