IntersectionObserver
마스터욱
0
24
0
0
2022-11-24 14:42:11
화면에서 특정영역이 노출되었을 경우에, 콜백(callback)을 실행하게끔 하는 기능이다.
쿠팡에서 리스트 화면 스윽스윽 내리다보면, 상품리스트가 또 연달아 이어서 노출되는 그런곳에 사용된다.
요즘 추세는 페이징 대신에 이런 퍼포먼스를 사용하는 듯 하다.
##############################
const options = { threshold: 0.5 };
const callback = (entries, observer) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
// 화면에 나타남
} else {
// console.log('화면에서 제외됨');
}
});
}
const observer = new IntersectionObserver(callback, options);
$(() => observer.observe(document.querySelectorAll('.footer')[0]));
