<body>
<div id="box1" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
<div id="box2" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
<div id="box3" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
<div id="box4" class="hoge" style="margin: 100px; height: 500px; width: 300px; background-color: aqua;"><p class="content"></p></div>
<script>
const scroll = 0.8;
const options = {
root: document,
rootMargin: '-100% 0px 1000% 0px',
threshold: 1 - scroll,
}
const observer = new IntersectionObserver(targets => {
targets.forEach(target => {
if (!target.isIntersecting) {
console.log('here is 80%');
} else {
console.log('out of viewport');
}
});
}, options);
observer.observe(document.body)
</script>
</body>
</html>
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.