- Published on
Intersection Observer
- Author
- Name
- yceffort
Intersection Observer
Intersection Observer๋ ์๋ฆฌ๋จผํธ๊ฐ viewport์ ๋ ธ์ถ๋๊ณ ์๋์ง ์ฌ๋ถ๋ฅผ ํ์ธํด์ฃผ๋ API๋ค. ๊ฐ๋จํ ๋งํด ๋ธ๋ผ์ฐ์ ์ ์ด๋ค ์์๊ฐ ํ๋ฉด์ ๋ ธ์ถ๋๊ณ ์๋์ง ์๋๊ณ ์๋์ง๋ฅผ ํ์ธํด์ฃผ๋ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ผ๊ณ ์๊ฐํ๋ฉด ๋ ๊ฒ ๊ฐ๋ค. ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๊ฐ ์์ด ์๋ฆฌ๋จผํธ๊ฐ ๋ ธ์ถ์ค์ธ์ง ํ์ธํ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น? ์ด์ ๊น์ง ์ฃผ๋ก ์ฌ์ฉ๋๋ API๋ getBoundingClientRect๋ค. ์ด ๋ฉ์๋๋ ํด๋น ์๋ฆฌ๋จผํธ์ ํฌ๊ธฐ์ viewport์์์ ์๋์ ์ธ ์์น๋ฅผ ์๋ ค์ค๋ค.
function isInViewport(element) {
// viewport์ height, width
const viewportHeight = document.documentElement.clientHeight
const viewportWidth = document.documentElement.clientWidth
// ์๋ฆฌ๋จผํธ์ rect
const rect = element.getBoundingClientRect()
if (!rect.width || !rect.height) {
return false
}
var top = rect.top >= 0 && rect.top < viewportHeight
var bottom = rect.bottom >= 0 && rect.bottom < viewportHeight
var left = rect.left >= 0 && rect.left < viewportWidth
var right = rect.right >= 0 && rect.right < viewportWidth
return (top || bottom) && (left || right)
}
๋ฌผ๋ก ์ด ํจ์๋ก๋ ์ถฉ๋ถํ ํ์ธ์ด ๊ฐ๋ฅํ๋ค. ๊ทธ๋ฌ๋ ๋ฌธ์ ๋ ์ด ํจ์๋ฅผ ์๋ ๋๋ ์์ด ๋ถ๋ฌ์ผ ํ ๊ฒ์ด๋ค. ๋ฌธ์๊ฐ ์ฒ์๋ก๋ฉ ๋์์๋, ์คํฌ๋กค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์๋, ๋ธ๋ผ์ฐ์ ํฌํค๊ฐ ๋ณ๊ฒฝ๋์์๋, (๋ชจ๋ฐ์ผ์ ๊ฒฝ์ฐ) ํ๋ฉด์ด ํ์ ๋์ ๋ ๋ฑ ๊ณ ๋ คํด์ผํ ์ฌํฉ์ด ๋๋ฌด๋๋ ๋ง๋ค. ๊ทธ๋ฆฌ๊ณ ๊ฒฐ์ ์ ์ผ๋ก getBoudingClientRect()
๋ ํธ์ถ์ด ๋ ๋ ๋ง๋ค ๋ ์ด์์์ ๋ค์ ๊ทธ๋ฆฌ๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ์ ๋งค์ฐ ๋ถ๋ด์ด ๊ฐ๋ค. ์ฐธ๊ณ
์ฌ์ฉ๋ฒ
var options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0,
}
var observer = new IntersectionObserver(callback, options)
root
: ์๋ฆฌ๋จผํธ ๋
ธ์ถ์ ๊ฐ์ํ viewport ์์ญ์ด๋ค. null์ด ๊ธฐ๋ณธ๊ฐ์ด๊ณ , null์ด๋ผ๋ฉด ๋ธ๋ผ์ฐ์ ์ ์ฒด๋ฅผ ๊ฐ์ํ๊ฒ ๋๋ค.
rootMargin
: css์ margin property์ ์ฌ์ฉ๋ฒ์ด ๊ฐ๋ค. root์ margin ๊ฐ์ ์ฃผ๋ ๊ฒ์ด๋ค.
threshold
: number, ๋๋ array of number๊ฐ ๊ฐ๋ฅํ๋ค. ์ฌ๊ธฐ์ ์ซ์๋ viewport์ n%๊ฐ ๋์์ ๋ ์ด๋ฒคํธ๋ฅผ ํธ์ถํ ๊ฒ์ธ์ง ๊ฒฐ์ ํ๋ ๊ฒ์ด๋ค. array๋ผ๋ฉด ํด๋น ์ซ์๋งํผ ๋
ธ์ถ๋ ๋ ๋ง๋ค ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ฒ ๋๋ค. ๊ธฐ๋ณธ๊ฐ์ 0 ์ผ๋ก, ๋จ 1ํฝ์
์ด๋ผ๋ ๋
ธ์ถ๋ ๊ฒฝ์ฐ ์ด๋ฒคํธ๊ฐ ๋ฐ์๋๋ค.
callback
: ํ๊ฒ์ด ๋
ธ์ถ๋ ๋ ์คํ๋๋ ์ฝ๋ฐฑํจ์๋ค. ์ฌ๊ธฐ์๋ ๋๊ฐ์ ๊ฐ์ ๋ฐํํ๋ค.
entries
: IntersectionObserverEntry์ array์ด๋ฉฐ, ๊ฐ๊ฐ ์ผ๋ง๋ ๋
ธ์ถ๋์๋์ง ๊ฐ์ด ๋์จ๋ค.
observer
: callback์ ํธ์ถํ IntersectionObserver
var target = document.querySelector('#listItem')
observer.observe(target)
https://codepen.io/yceffort/pen/RzVyML
์ฝ์์ฐฝ์ ๋ณด๋ฉด, 50% ์ด์ ๋์จ ์๋ฆฌ๋จผํธ๊ฐ ์ฐํ๋ ๊ฒ์ ๋ณผ ์ ์๋ค.
ํ์ฉํด๋ณด๊ธฐ
๋ฌดํ์คํฌ๋กค
https://codepen.io/yceffort/pen/VJbxNM
๋ฌธ์์ ๋งจ ๋ง์ง๋ง์ height๊ฐ 10px์ธ #watch_end_of_document
๋ฅผ ๋ฃ์ด์, ์ด ์๋ฆฌ๋จผํธ๊ฐ ๋ธ๋ผ์ฐ์ ์ ๋
ธ์ถ๋๊ฒ ๋๋ฉด ์คํฌ๋กค์ ๋ง์ง๋ง์ ์จ๊ฒ์ผ๋ก ๊ฐ์ฃผํ๊ณ ๊ทธ ๋๋ง๋ค ์๋ก์ด ์์ดํ
๋ค์ ๋ก๋ฉํ๋๋ก ๋ช
๋ น์ ๋ด๋ ธ๋ค.
์ด๋ฏธ์ง ๋ ์ด์ง ๋ก๋ฉ
https://codepen.io/yceffort/pen/YoVvya
์ฝ์ - ๋คํธ์ํฌ ์ฐฝ์ผ๋ก ๊ฐ๋ณด๋ฉด ์ด๋ฏธ์ง๊ฐ ๋์ ์ผ๋ก ๋ก๋ฉ๋๋ ๊ฒ์ ์ ์ ์๋ค. ๊ฐ๊ฐ์ ์๋ฆฌ๋จผํธ๋ค์ observer๋ฅผ ๊ฑธ์ด๋๊ณ , viewport์ ๊ฑธ์น ๋ ๋ง๋ค backgroundImage๋ฅผ ์ค์ ์ด๋ฏธ์ง๊ฐ ๋ก๋ฉ๋๋๋ก ํ์๋ค.