JS IntersectionObserver Nedir Nasıl Kullanılır?,

2021 yılında eklenen bu harikulade fonksiyon, sistemi biraz zorlayarak yaptığımız scroll olaylarını çok daha basite indirgeyip, hızlıca yapmamıza olanak sağlıyor.

Temel olarak fonksiyon, bize bir DOM nesnesinin, tam olarak ne zaman kullanıcının ekranında görünür olduğunu söylüyor. Bu bilgi ve olay tetikleyicisi ile, animasyonlar gösterip, DOM manipülasyonlarımız için mükemmel bir zamanla tutturabiliyoruz.

İstersen lafı çok uzatmadan hemen kod olarak Observerımızın nasıl çalıştığını görelim.

HTML kodumuz

`<ul>`
    `<li>---</li>`
    `<li>---</li>`
    `<li>---</li>`
    `<li>---</li>`
    `<li>---</li>`
    `<li>---</li>`
    `<li>---</li>`
    `<li>---</li>`
`</ul>`

CSS kodumuz

`li {`
    `border: 1px solid black;`
    `background-color: #efefef;`
    `height: 40vh;`
    `margin: 6em 0;`
`}`

JS kodumuz

Observerımızı yaratmadan önce, örnekte ne başarmak istediğimizden konuşalım. Hedefimiz, li elementlerinden hangisi ekrana girerse, gri olan arka plan renginin kırmıza dönmesini sağlayalım. Bu sayede rahat bir şekilde inceleme yapabiliriz.

Öncelikle Observer ‘ımızın ayar nesnesini yaratarak başlayalım.

`const ayarlar = {`
    `root: null,`
    `rootMargin: 0px,`
    `threshold: 0.5`
`}`

Ayar nesnemiz 3 farklı değişkene sahip oluyor. root değişkenini, eğer observerımız sayfanın genelinde değil de, yalnızca başka bir çerçeve içerisinde aktif hale getirmek istersek kullanıyoruz. Yani örneğin bir overflow div nesneniz vardır, bunun içerisinde kullanmak istersen root bölümünde burayı seçebiliryorsun. Doğrudan JS selector kullanabilirsin. Mesela; document.getElementById(dividsi) gibi. Bizim örneğimiz için bu bölümün null olması gerekiyor. Zira tüm sayfa için kullanıyoruz.

rootMargin değişkeni, eğer root değişkeni null haricinde başka bir değişkene atanmışsa kullanılıyor. root nesnesinin etrafını saran margin için bir değer. Bizim örneğimiz için kullanmamıza gerek yok.

threshold değişkeni ise bize ekrana girme olayının ne zaman başlayacağını ayarlıyor. Bu değere 0.5 verdim. Bu demek oluyor ki, örneğimizde kullandığımız li elementlerinin yarısı ekrana girdiğinde olayımız tetiklenecek. Eğer bu değeri 0 yaparsam, li elementinin herhangi bir pixeli ekrana girse bile olayımız tetiklenecekti. Bu değeri 1 verseydim, ekrana girme olayının tetiklenmesi için, li elementinin tamamının ekrana girmesi gerekirdi.

Kısaca threshold değişkeni 0 ile 1 arasında değer alan, hedef nesneminizin görünürlük oranını temsil ediyor.

const ekranaGirme = (objeler,observer) => { objeler.forEach((obje)=>{ if(obje.isIntersecting) { obje.target.style.backgroundColor = red } }) }

ekranaGirme fonksiyonumuz ise callback fonksiyonumuz. Observer nesnemiz, kendisine izlemeyi görev verdiğimiz elementler için bu fonksiyonu kullanıyor olacak. Bir observera, sınırsız nesneyi izleme görevi atayabiliyoruz. callback fonksiyonumuz her bir nesnenin ekrandaki görünürlüğünü kontrol edip, threshold değerinde belirttiğimiz miktarı görünür olduğu anda, isIntersecting doğrulaması yapıp, bize arka plan rengini değiştirecektir.

Son olarak observerımızın kendisini yaratıp, bütün kodu bir araya toplayalım

const observer = new IntersectionObserver(ekranaGirme,ayarlar) let hedefler = document.getElementsByTagName(li) Array.from(hedefler).map((li)=>{ console.log(ok) observer.observe(li) })