Intersection Observer
-> 내가 현재 보고있을 때만 상호작용하도록 하는 것.
#box {
width: 200px;
height: 200px;
background: red;
}<body>
<p> 테스트 문구입니다. </p>
<p> 테스트 문구입니다. </p>
<p> 테스트 문구입니다. </p>
<div id="box"></div>
<p> 테스트 문구입니다. </p>
</body>const box = document.querySelector("#box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction);
observer.observe(box);intersectionRatio: 0(default) ~ 1
isIntersection : true / false
const box = document.querySelector("#box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
threshold: 0.4
});
observer.observe(box);box가 40% 이상 보일 때
intersectionRatio가 약 0.4 이상일 때 isIntersecting 은 true 다.
console.log 뜬다.
box가 40% 미만 보일 때
intersectionRatio가 약 0.4 미만, isIntersecting 은 false 다.
이 때도 console.log 가 뜬다.
const box = document.querySelector("#box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
threshold: [0.2, 0.5, 0.8]
});
observer.observe(box);intersectionRatio 가 0.2, 0.5, 0.8 이상일 때마다 console.log가 뜬다.
isIntersecting: true
intersectionRatio 가 0.2, 0.5, 0.8 미만일 때마다 다시 console.log가 뜬다.
하지만 0.2 이상 0.8 미만 일 때, isIntersecting은 true다.
아직 상위의 threshold일 때 지켜보고 있기 때문이다.
0.2 미만이 되어야 비로소 isIntersecting 이 false가 된다.
#box {
width: 200px;
height: 200px;
background: red;
}
#container {
height: 150px;
overflow-y: auto;
}<body>
<div id="container">
<p> 테스트 문구입니다. </p>
<p> 테스트 문구입니다. </p>
<p> 테스트 문구입니다. </p>
<div id="box"></div>
<p> 테스트 문구입니다. </p>
</div>
</body>const box = document.getElementById("box");
const container = document.getElementById("container");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
threshold: [0.2, 0.5, 0.8],
root: container
});
observer.observe(box);여기서는 0.8 이상일 때 console.log가 뜨지 않는다.
왜냐하면 container(viewport)가 작아서 0.8 이상이 보이지 않기 때문이다.
0.8도 console.log를 나타나게 하려면 viewport, 즉 container의 크기를 증가시켜야 한다.
#container의 width를 150px -> 200px 로 수정하면 다시 나타난다.
<body>
<p> 테스트 문구입니다. </p>
<p> 테스트 문구입니다. </p>
<p> 테스트 문구입니다. </p>
<div id="box"></div>
<p> 테스트 문구입니다. </p>
</body>const box = document.getElementById("box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
rootMargin: "15px"
});
observer.observe(box);box의 margin-top이 15px 만큼 나왔을 때 console.log 나온다.
rootMargin은 css에서 적는 순서와 똑같이 적는다.
-15px 로 해두면 box가 15px 보였을 때 console.log 가 나온다.
intersectionRect:
현재 얼마나 보이는지 나타낸다.
const box = document.getElementById("box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
threshold: 0.2
});
observer.observe(box);이 때 intersectionRect 에서 height는 margin이 0일 때 현재 보인 height의 px 을 나타낸다.
const box = document.getElementById("box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
threshold: 0.2
});
observer.observe(box);
observer.unobserve(box);box의 관찰을 종료한다. observe를 해제한다.
console.log 안나온다.
const box = document.getElementById("box");
const callbackFunction = function(entries) {
console.log(entries[0]);
};
const observer = new IntersectionObserver(callbackFunction, {
threshold: 0.2
});
observer.observe(box);
observer.observe(box1);
observer.observe(box2);
observer.disconnect();여러 요소들 모두 관찰을 종료한다.
