Intersection Observer API μ˜ IntersectionObserver μΈν„°νŽ˜μ΄μŠ€λŠ” λŒ€μƒ μš”μ†Œμ™€ κ·Έ μƒμœ„ μš”μ†Œ ν˜Ήμ€ μ΅œμƒμœ„ λ„νλ¨ΌνŠΈμΈ viewportμ™€μ˜ ꡐ차 μ˜μ—­μ— λŒ€ν•œ λ³€ν™”λ₯Ό λΉ„λ™κΈ°μ μœΌλ‘œ 감지할 수 μžˆλ„λ‘ λ„μ™€μ€λ‹ˆλ‹€.

 IntersectionObserver κ°€ μƒμ„±λ˜λ©΄, 루트 λ‚΄μ—μ„œ μ„€μ •λœ λΉ„μœ¨ 만큼의 κ°€μ‹œμ„±μ„ 계속 κ°μ‹œν•˜λ„λ‘ μ„€μ •λ©λ‹ˆλ‹€. ν•œλ²ˆ μƒμ„±λ˜κ³  λ‚˜λ©΄, μ„€μ • 값은 변경될 수 μ—†μœΌλ―€λ‘œ, μƒμ„±λœ κ°μ‹œμž κ°μ²΄λŠ” κ°€μ‹œμ„± μ •λ„μ˜ λ³€ν™”λ₯Ό κ°μ‹œν•˜λŠ” λ°μ—λ§Œ 쓰일 수 μžˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ λ™μΌν•œ κ°μ‹œμž 객체둜 μ—¬λŸ¬ λŒ€μƒ μš”μ†Œλ₯Ό κ°μ‹œν•  수 μžˆμŠ΅λ‹ˆλ‹€.


IntersectionObserver κ°μ²΄λ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. ν•΄λ‹Ή κ°μ²΄λŠ” λŒ€μƒ μš”μ†Œμ˜ κ°€μ‹œμ„±μ΄ ν•˜λ‚˜ μ΄μƒμ˜ μ„€μ •λœ 정도 값을 λ„˜μ„ 경우 주어진 콜백 ν•¨μˆ˜λ₯Ό μ‹€ν–‰ν•©λ‹ˆλ‹€.


IntersectionObserver.root Read only
λŒ€μƒ μš”μ†Œ (element) λ₯Ό κ°μ‹œν•  μƒμœ„ μš”μ†Œ. 값을 넣지 μ•Šκ±°λ‚˜ null 일 경우, μ΅œμƒμœ„ λ¬Έμ„œμ˜ λ·°ν¬νŠΈκ°€ μ‚¬μš©λœλ‹€.
IntersectionObserver.rootMargin Read only
ꡐ차 정도λ₯Ό 계산할 λ•Œ 루트의 bounding box 에 μ μš©λ˜λŠ” offset μ‚¬κ°ν˜•μœΌλ‘œ, λ£¨νŠΈμ˜ λ²”μœ„λ₯Ό 효과적으둜 λŠ˜λ¦¬κ±°λ‚˜ μ€„μž…λ‹ˆλ‹€. μ΄ νŠΉμ„±μ΄ λ°˜ν™˜ν•œ 값은, μƒμ„±μžλ₯Ό 호좜 ν•  λ•Œ λ‚΄λΆ€ μš”κ΅¬ 사항에 맞게 λ³€κ²½ 될 수 μžˆμœΌλ―€λ‘œ μ§€μ •λœ κ°’κ³Ό 같지 μ•Šμ„ 수 μžˆμŠ΅λ‹ˆλ‹€. 각 offset 은 ν”½μ…€(px) ν˜Ήμ€ νΌμ„ΌνŠΈ(%)둜 ν‘œκΈ°λ  수 μžˆμŠ΅λ‹ˆλ‹€. κΈ°λ³Έ 값은 "0px 0px 0px 0px" μž…λ‹ˆλ‹€.
IntersectionObserver.thresholds Read only
μž„κ³„κ°’ λͺ©λ‘. 숫자의 μ˜€λ¦„μ°¨μˆœμœΌλ‘œ μ •λ ¬λ˜λ©°, 각 μž„κ³„ 값은 κ°μ‹œν•˜λŠ” λŒ€μƒμ˜ 경계 μƒμž μ˜μ—­κ³Όμ˜ ꡐ차 λΉ„μœ¨μž…λ‹ˆλ‹€. λŒ€μƒμ— λŒ€ν•œ μ•Œλ¦Όμ€ ν•΄λ‹Ή λŒ€μƒμ— λŒ€ν•œ μž„κ³„ 값이 초과 될 λ•Œ μƒμ„±λ©λ‹ˆλ‹€. μƒμ„±μžμ— 값이 μ „λ‹¬λ˜μ§€ μ•Šμ„ κ²½μš° 0이 μ‚¬μš©λ©λ‹ˆλ‹€.


IntersectionObserver κ°€ μ–΄λ–€ λŒ€μƒμ΄λΌλ„ κ°μ‹œν•˜λŠ” 것을 μ€‘μ§€ν•©λ‹ˆλ‹€.
λŒ€μƒ μš”μ†Œμ— λŒ€ν•œ κ°μ‹œλ₯Ό μ‹œμž‘ν•©λ‹ˆλ‹€.
λͺ¨λ“  κ°μ‹œλ˜λŠ” λŒ€μƒμ˜ λ°°μ—΄ (IntersectionObserverEntry) 을 λ¦¬ν„΄ν•©λ‹ˆλ‹€.
νŠΉμ • λŒ€μƒ μš”μ†Œλ₯Ό κ°μ‹œν•˜λŠ” 것을 μ€‘μ§€ν•©λ‹ˆλ‹€.


var intersectionObserver = new IntersectionObserver(function(entries) {
  // If intersectionRatio is 0, the target is out of view
  // and we do not need to do anything.
  if (entries[0].intersectionRatio <= 0) return;

  console.log('Loaded new items');
// start observing


Browser compatibility

BCD tables only load in the browser

See also