Javascript Intersection Observer API

Javascript'de hemen hemen her iş için API'ler mevcut, Intersection Observer API da bunlardan bir tanesi.

Yaptığı şey ise tam olarak hedeflenen etiketin sayfada görünürlüğünü izleyip buna göre bir işlem yapmamızı sağlıyor.

Bunu yapabilmek için önce bir instance oluşturmamız gerekiyor. Örneğin;

const callback = (entries) => {
    console.log(entries);
};
const options = {
    root: document.querySelector('#scrollArea'),
    rootMargin: '0px',
    threshold: 0.5
};
const observer = new IntersectionObserver(callback, options);

Seçenekler (Options)

Yukarıdaki seçeneklerin hiçbirisini vermeden tanımlayabilirsiniz. Seçeneklerin ne olduğunu açıklamak gerekirse;

root - Hedefin görünürlüğünü kontrol ederken kullanacağımız scroll olan objemiz, yok ise varsayılan olarak en üst nesnesi kullanır.
rootMargin - Hedefin görünürlüğünün mesafesini ayarlamak için kullanılır. Örneğin 100px verirseniz 100px yukarıdan itibaren görünür kabul edilecektir, negatif değer verirseniz örneğin -100px gibi, o zaman da 100px içeriden itibaren görünmeye başlayacaktır.
threshold: Hedefin görünürlüğünün yüzdesini ayarlar. Örneğin %50'den sonra görünür olduğunu anlamka istiyorsak 0.5 yazmak yeterli. 0 ile 1 arasında float değer alır. Ayrıca birden fazla değerde alabilir. Örneğin %20, %50 ve %80'de çalışması için [0.2, 0.5, 0.8] yazmanız gerekir.

instance'ı oluşturduktan sonra artık bir hedef belirleyip observe() ile izlemeye başlayabiliriz.

const callback = (entries) => {
    console.log(entries[0]);
};
const options = {
    threshold: 0.5
};
const observer = new IntersectionObserver(callback, options);

const target = document.getElementById('box');
observer.observe(target);

Artık #box divi göründüğü anda ve görünürlükten kaybolduğunda callback() fonksiyonumuz çalışacak. Bu fonksiyon içerisinde değerler IntersectionObserverEntry objesi olarak geliyor. Ve fonksiyon içerisinde kullanabileceğiniz değerler şunlardır;

const callback = (entries) => {
    entries.forEach(entry => {
        //   entry.boundingClientRect
        //   entry.intersectionRatio
        //   entry.intersectionRect
        //   entry.isIntersecting
        //   entry.rootBounds
        //   entry.target
        //   entry.time
    });
};

Örnekler ve daha fazlası için videoyu izlemeyi unutmayın!