Kaydırmayla Tetiklenen Efektler için IntersectionObserver

IntersectionObserver API'si, bir veya daha fazla öğenin tarayıcı görünüm alanına ya da belirtilen bir üst öğeye girip girmediğini verimli biçimde izler. Her pikselde çalışan kaydırma dinleyicilerinin aksine gözlemci, geri çağrımınızı yalnızca öğe bir eşiği geçtiğinde çağırır. Bu nedenle kaydırma tabanlı efektlerde çok daha yüksek performans sağlar.

Geri çağrım, izlenen her öğe için bir tane olmak üzere IntersectionObserverEntry nesnelerinden oluşan bir dizi alır. Her girdide, öğe görünür olduğunda doğru değerini alan isIntersecting mantıksal değeri ve o anda görünür olan bölümün 0 ile 1 arasındaki oranını belirten bir intersectionRatio sayısı bulunur. Görünürlük durumunu belirlemek için bunları kullanın.

Gözlemciyi bir useEffect içinde oluşturun ve öğeyi izlemeye başlamak için observer.observe(ref.current) çağrısını yapın. İzlemek istediğiniz DOM öğesine ref bağlanmış olmalıdır. Gözlemciyi bileşen bağlandıktan sonra oluşturun; böylece ref.current doldurulmuş olur.

useEffect temizleme işlevinde, belirli bir öğeyi izlemeyi durdurmak için observer.unobserve(element) veya tüm gözlemleri durdurmak için observer.disconnect() çağrısını yapın. Temizlemeyi unutmak, bileşen kaldırıldıktan sonra gözlemcinin çalışmaya devam etmesine ve bunun sonucunda hatalara ya da bellek sızıntılarına yol açabilir.

threshold seçeneği geri çağrımın ne zaman çalışacağını denetler. 0 değeri, öğenin herhangi bir pikseli görünür olur olmaz tetiklenir. 1 değeri yalnızca öğe tamamen görünür olduğunda tetiklenir. Birden çok görünürlük düzeyinde geri çağrım almak için [0, 0.5, 1] gibi bir dizi de iletebilirsiniz.

rootMargin, CSS benzeri söz dizimini kullanarak etkin kesişim alanını genişletir veya daraltır: '100px 0px', öğe görünüm alanına girmeden 100 piksel önce tetiklenir. Yalnızca öğe görünüm alanının 100 piksel içine girdiğinde tetiklemek için '-100px' kullanın. Bu, öğe tamamen görünür olmadan önce ön yükleme yapmak veya animasyon başlatmak için kullanışlıdır.

Görselleri gecikmeli yüklemek için başlangıçta src yerine data-src özniteliğini ayarlayın. Gözlemci isIntersecting: true ile tetiklendiğinde, ağ isteğini başlatmak için data-src değerini src değerine kopyalayın. Ardından görselin yalnızca bir kez yüklenmesi gerektiğinden observer.unobserve(entry.target) çağrısını yapın.

Belirme animasyonları için isIntersecting doğru olduğunda bir CSS sınıfı ekleyin: element.classList.add('visible'). Geçişi CSS içinde tanımlayın: .card { opacity: 0; transform: translateY(20px); transition: opacity 0.4s, transform 0.4s; } ve .card.visible { opacity: 1; transform: none; }. Gözlemci, tetikleyiciyi verimli bir şekilde çalıştırır.

IntersectionObserver, görüntülenme izleme için idealdir. data-analytics-id özniteliğine sahip bir öğe 0,5 eşiğiyle kesişim durumuna geçtiğinde bir analiz olayı tetikleyin. Bu yöntem, kullanıcıların gerçekten okuduğu içerik bölümlerini basit kaydırma derinliği yüzdesine kıyasla çok daha güvenilir ve doğru biçimde ölçer.

Tek bir IntersectionObserver örneği, her öğe için observer.observe(element) çağrılarak birden çok öğeyi gözlemleyebilir. Gözlemlenen tüm öğeler aynı geri çağırmayı ve seçenekleri paylaşır. Bildirimi hangi öğenin tetiklediğini belirlemek için geri çağırma içinde entry.target kullanın.

Yeniden kullanılabilir bir useInView kancası [ref, inView] döndürür. ref değerini herhangi bir öğeye bağlayın ve öğenin o anda görünür olup olmadığını öğrenmek için inView değerini okuyun. Kanca, eşik ve rootMargin için bir options nesnesi kabul eder. Bu soyutlama, kaydırma efektlerini her bileşende bildirimsel hâle getirir.

Bir IntersectionObserver eşiğinin 0 olması ne anlama gelir?

IntersectionObserver, isIntersecting ve intersectionRatio kullanarak öğe görünürlüğünü verimli biçimde izler. Gözlemeyi durdurma veya bağlantıyı kesme işlemiyle her zaman temizleme yapın. Tetikleme noktasını denetlemek için eşiği, algılama bölgesini genişletmek için rootMargin değerini kullanın. Bu yöntemi gecikmeli yükleme, animasyonlar ve analiz izleme için uygulayın.