getBoundingClientRect Nedir? Kullanımı ve Örnekleri

getBoundingClientRect Nedir?

getBoundingClientRect(), JavaScript'te bir DOM öğesinin görünüm penceresine (viewport) göre konumunu ve boyutunu döndüren bir metoddur. Bir HTML elementini seçip bu metodu çağırdığınızda, size o elementin sol, sağ, üst, alt kenar koordinatlarını ve genişlik/yükseklik değerlerini içeren bir DOMRect nesnesi döner. Bu değerler piksel cinsinden ve viewport'a göre hesaplanır.

Metodun döndürdüğü DOMRect nesnesi şu özellikleri içerir: top (üst kenarın viewport üstünden uzaklığı), bottom (alt kenarın viewport üstünden uzaklığı), left (sol kenarın viewport solundan uzaklığı), right (sağ kenarın viewport solundan uzaklığı), width (elementin genişliği) ve height (elementin yüksekliği). Ayrıca x ve y özellikleri de top ve left ile eşdeğer bilgi sunar.

Kullanım Örnekleri: Tooltip ve Sticky Navigasyon

getBoundingClientRect'in en yaygın kullanım alanlarından biri tooltip (ipucu balonu) konumlandırması. Bir butona hover eden kullanıcıya tooltip göstermek istediğinizde, tooltip'in ekranın dışına taşmaması için butonun konumunu hesaplamanız gerekiyor. getBoundingClientRect ile butonun top, left ve width değerlerini alarak tooltip'i dinamik biçimde konumlandırabilirsiniz.

Sticky navigasyon ve scroll tabanlı animasyonlarda da bu metod sıklıkla kullanılıyor. Bir elementin viewport içinde görünüp görünmediğini kontrol etmek için getBoundingClientRect().top değerini window.innerHeight ile karşılaştırmak yeterli. top değeri window.innerHeight'dan küçükse element görünür alandadır.

Sonsuz Kaydırma ve Performans İpuçları

Sonsuz kaydırma (infinite scroll) implementasyonlarında liste sonundaki 'sentinel' elementin viewport'a yaklaşıp yaklaşmadığını kontrol etmek için getBoundingClientRect kullanılabiliyor. Ancak bu metod layout reflow'a (yeniden yerleşim hesabı) yol açtığından scroll event'i içinde sık sık çağırılması performans sorunlarına neden oluyor. Modern uygulamalarda IntersectionObserver API tercih edilmeli; getBoundingClientRect ise animasyon frame'i dışında, hesaplama gerektiği anlarda kullanılmalı.

Bir diğer dikkat noktası: getBoundingClientRect değerleri viewport'a göre hesaplandığından, sayfanın kaydırılmış konumunu da hesaba katmak gerekiyorsa window.scrollX ve window.scrollY değerleri eklenmeli. Örneğin bir elementin sayfanın başından itibaren mutlak konumunu bulmak için rect.top + window.scrollY formülü kullanılır.

Blakfy ile Web Geliştirme Danışmanlığı

getBoundingClientRect gibi DOM API'larının doğru ve performanslı kullanımı, web uygulamalarının kalitesini doğrudan etkiliyor. Blakfy olarak modern JavaScript, performans optimizasyonu ve kullanıcı deneyimi odaklı web geliştirme konularında danışmanlık sunuyoruz. Mevcut web uygulamanızdaki performans sorunlarını tespit etmek ve çözüme kavuşturmak için ekibimizle iletişime geçebilirsiniz.

Hem SEO hem de teknik web geliştirme konularında kapsamlı destek arıyorsanız Blakfy'nin bütüncül dijital hizmet paketleri tam size göre. Site hızı, Core Web Vitals ve kullanıcı deneyimi optimizasyonu için bugün iletişime geçebilirsiniz.