getBoundingClientRect Nedir? Kullanımı ve Örnekleri

getBoundingClientRect Nedir?

⠀

`getBoundingClientRect()`, bir HTML öğesinin tarayıcı görüntü alanına (viewport) göre konumunu ve boyutlarını döndüren bir JavaScript DOM metodudur. Bu metot, özellikle animasyonlar, sonsuz kaydırma (infinite scroll), sticky elemanlar ve pozisyon tabanlı etkileşimler geliştirirken kritik bir araç haline gelir.

Methodun döndürdüğü `DOMRect` nesnesi şu özellikleri içerir:

• `top`: Öğenin üst kenarının viewport'tan uzaklığı (piksel)

• `bottom`: Alt kenarının viewport'tan uzaklığı

• `left`: Sol kenarının viewport'tan uzaklığı

• `right`: Sağ kenarının viewport'tan uzaklığı

• `width`: Öğenin genişliği

• `height`: Öğenin yüksekliği

• `x` ve `y`: Sol ve üst kenarların koordinatları (top ve left ile aynı)

⠀

⠀

Pratik Kullanım Senaryoları

⠀

Öğenin ekranda görünüp görünmediğini kontrol etmek:

Bir kullanıcının belirli bir içerik bloğunu görüp görmediğini anlamak için `getBoundingClientRect()` kullanılabilir. Öğenin `top` değeri `window.innerHeight`'tan küçük ve `bottom` değeri sıfırdan büyükse öğe görünür alandadır.

Tooltip veya dropdown konumlandırması:

Tıklanan bir butona göre bir dropdown menünün nerede açılacağını hesaplamak için hedef öğenin `getBoundingClientRect()` değerleri kullanılır. Bu sayede menü ekran dışına taşmadan doğru konumda açılır.

Sonsuz kaydırma tetikleyicisi:

Liste sonuna yerleştirilen bir "yükleniyor" öğesinin görünür alana girip girmediği kontrol edilerek yeni içerik yükleme tetiklenebilir. `IntersectionObserver` da benzer işlevi görmekle birlikte daha modern bir yaklaşım sunar.

⠀

Performans ve Dikkat Edilecekler

⠀

• `getBoundingClientRect()` çağrısı layout reflow (yeniden hesaplama) tetikler. Döngü içinde sık sık çağrılması performans sorunlarına yol açabilir.

• Scroll event listener ile birlikte kullanılacaksa `requestAnimationFrame` ile throttle uygulanmalıdır.

• Değerler viewport'a göre hesaplanır; sayfa scroll edildiğinde `top` değeri değişir. Sayfa mutlak konumu için `top + window.scrollY` kullanılmalıdır.

⠀

Web performansı ve JavaScript optimizasyonu, e-ticaret dönüşüm oranlarını doğrudan etkiler. Blakfy olarak Wix ve özel web sitesi projelerinde teknik SEO ve performans optimizasyonu hizmetleri sunuyoruz. Detaylar için bize ulaşın.

⠀

IntersectionObserver ile Karşılaştırma

⠀

getBoundingClientRect() ve IntersectionObserver, benzer sorunları çözen ancak farklı yaklaşımlar kullanan iki DOM API'sidir. Hangisini ne zaman kullanmalısınız?

getBoundingClientRect() tercih edilmeli:

• Anlık, tek seferlik konum hesaplamalarında

• Pozisyon tabanlı animasyon veya tooltip yerleşiminde

• Kullanıcı tıklaması veya etkileşimine tepki olarak tetiklenen hesaplamalarda

⠀

IntersectionObserver tercih edilmeli:

• Sürekli izleme gerektiren senaryolarda (scroll tabanlı animasyonlar)

• Lazy loading (geç yükleme) uygulamalarında

• Performansın kritik olduğu durumlarda; IntersectionObserver ana thread'i bloklamaz

⠀

Tarayıcı Desteği:

Her iki API de modern tarayıcıların tamamında desteklenmektedir. getBoundingClientRect() daha eski tarayıcılarda da (IE9+) çalışırken IntersectionObserver IE'de desteklenmez ve polyfill gerektirir.

Web geliştirme ve JavaScript optimizasyonu konularında daha fazla pratik rehber için Blakfy Blog'u takip edin. Wix veya özel web sitesi projenizde teknik destek için ekibimizle iletişime geçin.