Intersection Observer API μ IntersectionObserver
μΈν°νμ΄μ€λ λμ μμμ κ·Έ μμ μμ νΉμ μ΅μμ λνλ¨ΌνΈμΈ viewportμμ κ΅μ°¨ μμμ λν λ³νλ₯Ό λΉλκΈ°μ μΌλ‘ κ°μ§ν μ μλλ‘ λμμ€λλ€.
IntersectionObserver
κ° μμ±λλ©΄, λ£¨νΈ λ΄μμ μ€μ λ λΉμ¨ λ§νΌμ κ°μμ±μ κ³μ κ°μνλλ‘ μ€μ λ©λλ€. νλ² μμ±λκ³ λλ©΄, μ€μ κ°μ λ³κ²½λ μ μμΌλ―λ‘, μμ±λ κ°μμ κ°μ²΄λ κ°μμ± μ λμ λ³νλ₯Ό κ°μνλ λ°μλ§ μ°μΌ μ μμ΅λλ€. νμ§λ§ λμΌν κ°μμ κ°μ²΄λ‘ μ¬λ¬ λμ μμλ₯Ό κ°μν μ μμ΅λλ€.
Constructor
IntersectionObserver.IntersectionObserver()
IntersectionObserver
κ°μ²΄λ₯Ό μμ±ν©λλ€. ν΄λΉ κ°μ²΄λ λμ μμμ κ°μμ±μ΄ νλ μ΄μμ μ€μ λ μ λ κ°μ λμ κ²½μ° μ£Όμ΄μ§ μ½λ°± ν¨μλ₯Ό μ€νν©λλ€.
Properties
IntersectionObserver.root
Read only- λμ μμ (
element
) λ₯Ό κ°μν μμ μμ. κ°μ λ£μ§ μκ±°λnull
μΌ κ²½μ°, μ΅μμ λ¬Έμμ λ·°ν¬νΈκ° μ¬μ©λλ€. IntersectionObserver.rootMargin
Read only- κ΅μ°¨ μ λλ₯Ό κ³μ°ν λ 루νΈμ bounding box μ μ μ©λλ offset μ¬κ°νμΌλ‘, 루νΈμ λ²μλ₯Ό ν¨κ³Όμ μΌλ‘ λ리거λ μ€μ
λλ€. μ΄ νΉμ±μ΄ λ°νν κ°μ, μμ±μλ₯Ό νΈμΆ ν λ λ΄λΆ μꡬ μ¬νμ λ§κ² λ³κ²½ λ μ μμΌλ―λ‘ μ§μ λ κ°κ³Ό κ°μ§ μμ μ μμ΅λλ€. κ° offset μ ν½μ
(
px
) νΉμ νΌμΌνΈ(%
)λ‘ νκΈ°λ μ μμ΅λλ€. κΈ°λ³Έ κ°μ "0px 0px 0px 0px" μ λλ€. IntersectionObserver.thresholds
Read only- μκ³κ° λͺ©λ‘. μ«μμ μ€λ¦μ°¨μμΌλ‘ μ λ ¬λλ©°, κ° μκ³ κ°μ κ°μνλ λμμ κ²½κ³ μμ μμκ³Όμ κ΅μ°¨ λΉμ¨μ λλ€. λμμ λν μλ¦Όμ ν΄λΉ λμμ λν μκ³ κ°μ΄ μ΄κ³Ό λ λ μμ±λ©λλ€. μμ±μμ κ°μ΄ μ λ¬λμ§ μμ κ²½μ° 0μ΄ μ¬μ©λ©λλ€.
Methods
IntersectionObserver.disconnect()
IntersectionObserver
κ° μ΄λ€ λμμ΄λΌλ κ°μνλ κ²μ μ€μ§ν©λλ€.IntersectionObserver.observe()
- λμ μμμ λν κ°μλ₯Ό μμν©λλ€.
IntersectionObserver.takeRecords()
- λͺ¨λ κ°μλλ λμμ λ°°μ΄ (
IntersectionObserverEntry
) μ 리ν΄ν©λλ€. IntersectionObserver.unobserve()
- νΉμ λμ μμλ₯Ό κ°μνλ κ²μ μ€μ§ν©λλ€.
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
The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.