IntersectionObserver

Intersection Observer API ์˜ IntersectionObserver ์ธํ„ฐํŽ˜์ด์Šค๋Š” ๋Œ€์ƒ ์š”์†Œ์™€ ๊ทธ ์ƒ์œ„ ์š”์†Œ ํ˜น์€ ์ตœ์ƒ์œ„ ๋„ํ๋จผํŠธ์ธ viewport์™€์˜ ๊ต์ฐจ ์˜์—ญ์— ๋Œ€ํ•œ ๋ณ€ํ™”๋ฅผ ๋น„๋™๊ธฐ์ ์œผ๋กœ ๊ฐ์ง€ํ•  ์ˆ˜ ์žˆ๋„๋ก ๋„์™€์ค๋‹ˆ๋‹ค.

 IntersectionObserver ๊ฐ€ ์ƒ์„ฑ๋˜๋ฉด, ๋ฃจํŠธ ๋‚ด์—์„œ ์„ค์ •๋œ ๋น„์œจ ๋งŒํผ์˜ ๊ฐ€์‹œ์„ฑ์„ ๊ณ„์† ๊ฐ์‹œํ•˜๋„๋ก ์„ค์ •๋ฉ๋‹ˆ๋‹ค. ํ•œ๋ฒˆ ์ƒ์„ฑ๋˜๊ณ  ๋‚˜๋ฉด, ์„ค์ • ๊ฐ’์€ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ, ์ƒ์„ฑ๋œ ๊ฐ์‹œ์ž ๊ฐ์ฒด๋Š” ๊ฐ€์‹œ์„ฑ ์ •๋„์˜ ๋ณ€ํ™”๋ฅผ ๊ฐ์‹œํ•˜๋Š” ๋ฐ์—๋งŒ ์“ฐ์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ๋™์ผํ•œ ๊ฐ์‹œ์ž ๊ฐ์ฒด๋กœ ์—ฌ๋Ÿฌ ๋Œ€์ƒ ์š”์†Œ๋ฅผ ๊ฐ์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

Constructor

IntersectionObserver.IntersectionObserver()
IntersectionObserver ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค. ํ•ด๋‹น ๊ฐ์ฒด๋Š” ๋Œ€์ƒ ์š”์†Œ์˜ ๊ฐ€์‹œ์„ฑ์ด ํ•˜๋‚˜ ์ด์ƒ์˜ ์„ค์ •๋œ ์ •๋„ ๊ฐ’์„ ๋„˜์„ ๊ฒฝ์šฐ ์ฃผ์–ด์ง„ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

Properties

IntersectionObserver.root Read only
๋Œ€์ƒ ์š”์†Œ (element) ๋ฅผ ๊ฐ์‹œํ•  ์ƒ์œ„ ์š”์†Œ. ๊ฐ’์„ ๋„ฃ์ง€ ์•Š๊ฑฐ๋‚˜ null ์ผ ๊ฒฝ์šฐ, ์ตœ์ƒ์œ„ ๋ฌธ์„œ์˜ ๋ทฐํฌํŠธ๊ฐ€ ์‚ฌ์šฉ๋œ๋‹ค.
IntersectionObserver.rootMargin (en-US) Read only
๊ต์ฐจ ์ •๋„๋ฅผ ๊ณ„์‚ฐํ•  ๋•Œ ๋ฃจํŠธ์˜ bounding box (en-US) ์— ์ ์šฉ๋˜๋Š” offset ์‚ฌ๊ฐํ˜•์œผ๋กœ, ๋ฃจํŠธ์˜ ๋ฒ”์œ„๋ฅผ ํšจ๊ณผ์ ์œผ๋กœ ๋Š˜๋ฆฌ๊ฑฐ๋‚˜ ์ค„์ž…๋‹ˆ๋‹ค. ์ด ํŠน์„ฑ์ด ๋ฐ˜ํ™˜ํ•œ ๊ฐ’์€, ์ƒ์„ฑ์ž๋ฅผ ํ˜ธ์ถœ ํ•  ๋•Œ ๋‚ด๋ถ€ ์š”๊ตฌ ์‚ฌํ•ญ์— ๋งž๊ฒŒ ๋ณ€๊ฒฝ ๋  ์ˆ˜ ์žˆ์œผ๋ฏ€๋กœ ์ง€์ •๋œ ๊ฐ’๊ณผ ๊ฐ™์ง€ ์•Š์„ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ offset ์€ ํ”ฝ์…€(px) ํ˜น์€ ํผ์„ผํŠธ(%)๋กœ ํ‘œ๊ธฐ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ๊ฐ’์€ "0px 0px 0px 0px" ์ž…๋‹ˆ๋‹ค.
IntersectionObserver.thresholds (en-US) Read only
์ž„๊ณ„๊ฐ’ ๋ชฉ๋ก. ์ˆซ์ž์˜ ์˜ค๋ฆ„์ฐจ์ˆœ์œผ๋กœ ์ •๋ ฌ๋˜๋ฉฐ, ๊ฐ ์ž„๊ณ„ ๊ฐ’์€ ๊ฐ์‹œํ•˜๋Š” ๋Œ€์ƒ์˜ ๊ฒฝ๊ณ„ ์ƒ์ž ์˜์—ญ๊ณผ์˜ ๊ต์ฐจ ๋น„์œจ์ž…๋‹ˆ๋‹ค. ๋Œ€์ƒ์— ๋Œ€ํ•œ ์•Œ๋ฆผ์€ ํ•ด๋‹น ๋Œ€์ƒ์— ๋Œ€ํ•œ ์ž„๊ณ„ ๊ฐ’์ด ์ดˆ๊ณผ ๋  ๋•Œ ์ƒ์„ฑ๋ฉ๋‹ˆ๋‹ค. ์ƒ์„ฑ์ž์— ๊ฐ’์ด ์ „๋‹ฌ๋˜์ง€ ์•Š์„ ๊ฒฝ์šฐ 0์ด ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

Methods

IntersectionObserver.disconnect() (en-US)
IntersectionObserver ๊ฐ€ ์–ด๋–ค ๋Œ€์ƒ์ด๋ผ๋„ ๊ฐ์‹œํ•˜๋Š” ๊ฒƒ์„ ์ค‘์ง€ํ•ฉ๋‹ˆ๋‹ค.
IntersectionObserver.observe()
๋Œ€์ƒ ์š”์†Œ์— ๋Œ€ํ•œ ๊ฐ์‹œ๋ฅผ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
IntersectionObserver.takeRecords() (en-US)
๋ชจ๋“  ๊ฐ์‹œ๋˜๋Š” ๋Œ€์ƒ์˜ ๋ฐฐ์—ด (IntersectionObserverEntry (en-US)) ์„ ๋ฆฌํ„ดํ•ฉ๋‹ˆ๋‹ค.
IntersectionObserver.unobserve() (en-US)
ํŠน์ • ๋Œ€์ƒ ์š”์†Œ๋ฅผ ๊ฐ์‹œํ•˜๋Š” ๊ฒƒ์„ ์ค‘์ง€ํ•ฉ๋‹ˆ๋‹ค.

Examples

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;

  loadItems(10);
  console.log('Loaded new items');
});
// start observing
intersectionObserver.observe(document.querySelector('.scrollerFooter'));

Specifications

Specification Status Comment
Intersection Observer
The definition of 'IntersectionObserver' in that specification.
Working Draft

Browser compatibility

BCD tables only load in the browser

See also