getBoundingClientRect Nedir? Kullanımı ve Örnekleri

Web geliştirmede bir elementin sayfadaki tam konumunu bilmek, pek çok etkileşimli özelliğin temelini oluşturur. Tooltip göstermek, dropdown menü açmak, sürükle-bırak işlemi yapmak veya scroll animasyonları oluşturmak istediğinizde elementin piksel bazında nerede olduğunu bilmeniz gerekir. JavaScript'in getBoundingClientRect() metodu tam da bu ihtiyacı karşılar.

Bu rehberde getBoundingClientRect() metodunun ne olduğunu, nasıl çalıştığını ve hangi durumlarda kullanabileceğinizi kod örnekleriyle birlikte öğreneceksiniz.

getBoundingClientRect() Nedir?

getBoundingClientRect(), bir DOM elementinin viewport (görüntüleme alanı) içindeki konumunu ve boyutlarını döndüren JavaScript metodudur. Bu metot, elementin ekranda tam olarak nerede göründüğünü piksel cinsinden hesaplar ve sonucu DOMRect nesnesi olarak döndürür.

Metodun temel kullanımı oldukça basittir:

const element = document.querySelector('.hedef-element');
const rect = element.getBoundingClientRect();

console.log(rect);

Bu kod çalıştığında konsola şuna benzer bir çıktı gelir:

DOMRect {
  x: 100,
  y: 200,
  width: 300,
  height: 150,
  top: 200,
  right: 400,
  bottom: 350,
  left: 100
}

DOMRect Özellikleri

getBoundingClientRect() metodunun döndürdüğü DOMRect nesnesi sekiz özellik içerir. Bu özelliklerin her biri elementin konumu hakkında farklı bir bilgi sunar.

Konum Özellikleri

top: Elementin üst kenarının viewport'un üst kenarına olan uzaklığı (piksel)

left: Elementin sol kenarının viewport'un sol kenarına olan uzaklığı (piksel)

bottom: Elementin alt kenarının viewport'un üst kenarına olan uzaklığı (piksel)

right: Elementin sağ kenarının viewport'un sol kenarına olan uzaklığı (piksel)

Boyut Özellikleri

width: Elementin genişliği (padding ve border dahil)

height: Elementin yüksekliği (padding ve border dahil)

Alternatif Konum Özellikleri

x: left değeriyle aynı

y: top değeriyle aynı

Aşağıdaki görsel, bu özelliklerin viewport üzerindeki karşılıklarını göstermektedir:

Viewport (Tarayıcı Penceresi)
┌─────────────────────────────────────────┐
│                  ↑                      │
│                 top                     │
│                  ↓                      │
│     ←left→ ┌──────────┐                 │
│            │          │ ↑               │
│            │  Element │ height          │
│            │          │ ↓               │
│            └──────────┘                 │
│            ←  width   →                 │
│                        ←right→          │
│                                         │
│            ←───bottom (viewport üstünden)│
└─────────────────────────────────────────┘

Temel Kullanım Örnekleri

Örnek 1: Element Koordinatlarını Alma

En basit kullanım, bir elementin anlık koordinatlarını almaktır:

const kutu = document.getElementById('kutu');
const konum = kutu.getBoundingClientRect();

console.log(`Sol: ${konum.left}px`);
console.log(`Üst: ${konum.top}px`);
console.log(`Genişlik: ${konum.width}px`);
console.log(`Yükseklik: ${konum.height}px`);

Örnek 2: Elementin Viewport İçinde Görünür Olup Olmadığını Kontrol Etme

Bir elementin kullanıcının ekranında görünüp görünmediğini kontrol etmek için:

function elementGorunurMu(element) {
  const rect = element.getBoundingClientRect();
  
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= window.innerHeight &&
    rect.right <= window.innerWidth
  );
}

const hedef = document.querySelector('.kontrol-edilecek');
if (elementGorunurMu(hedef)) {
  console.log('Element ekranda görünüyor');
} else {
  console.log('Element ekran dışında');
}

Örnek 3: Tooltip Konumlandırma

Bir butona tıklandığında tooltip göstermek için:

const buton = document.querySelector('.tooltip-buton');
const tooltip = document.querySelector('.tooltip');

buton.addEventListener('mouseenter', function() {
  const rect = buton.getBoundingClientRect();
  
  // Tooltip'i butonun hemen altına konumlandır
  tooltip.style.position = 'fixed';
  tooltip.style.left = rect.left + 'px';
  tooltip.style.top = rect.bottom + 5 + 'px'; // 5px boşluk
  tooltip.style.display = 'block';
});

buton.addEventListener('mouseleave', function() {
  tooltip.style.display = 'none';
});

Scroll ile İlişkisi

getBoundingClientRect() viewport'a göre konum döndürdüğü için sayfa scroll edildiğinde değerler değişir. Bu önemli bir noktadır çünkü aynı element için farklı scroll pozisyonlarında farklı değerler alırsınız.

Eğer sayfanın en üstünden itibaren mutlak konum istiyorsanız, scroll değerini eklemeniz gerekir:

const element = document.querySelector('.hedef');
const rect = element.getBoundingClientRect();

// Viewport'a göre konum
const viewportTop = rect.top;
const viewportLeft = rect.left;

// Sayfa başından itibaren mutlak konum
const sayfaTop = rect.top + window.scrollY;
const sayfaLeft = rect.left + window.scrollX;

console.log(`Viewport Top: ${viewportTop}px`);
console.log(`Sayfa Top: ${sayfaTop}px`);

CSS Transform Desteği

getBoundingClientRect() metodunun önemli avantajlarından biri CSS transform değerlerini hesaba katmasıdır. Element translate, scale veya rotate ile dönüştürülmüş olsa bile gerçek görsel konumunu doğru şekilde döndürür.

.donmus-element {
  transform: rotate(45deg) scale(1.5) translateX(50px);
}

const donmus = document.querySelector('.donmus-element');
const rect = donmus.getBoundingClientRect();

// Transform uygulanmış haliyle gerçek konum ve boyut
console.log(`Gerçek genişlik: ${rect.width}px`);
console.log(`Gerçek konum: ${rect.left}px, ${rect.top}px`);

Bu özellik, offsetWidth ve offsetLeft gibi alternatif yöntemlerde bulunmaz. Onlar transform öncesi değerleri döndürür.

Pratik Kullanım Senaryoları

Lazy Loading (Tembel Yükleme)

Görselleri sadece viewport'a yaklaştıklarında yüklemek için:

function lazyLoadKontrol() {
  const gorseller = document.querySelectorAll('img[data-src]');
  
  gorseller.forEach(img => {
    const rect = img.getBoundingClientRect();
    
    // Görsel viewport'a 100px kala yüklemeye başla
    if (rect.top < window.innerHeight + 100) {
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
    }
  });
}

window.addEventListener('scroll', lazyLoadKontrol);

Dropdown Menü Yönü Belirleme

Menünün ekranın alt kısmına yakınsa yukarı açılmasını sağlamak için:

function dropdownYonBelirle(tetikleyici, menu) {
  const rect = tetikleyici.getBoundingClientRect();
  const menuYuksekligi = 200; // Tahmini menü yüksekliği
  
  // Altta yeterli alan var mı kontrol et
  const altaAcilabilir = (window.innerHeight - rect.bottom) > menuYuksekligi;
  
  if (altaAcilabilir) {
    menu.style.top = rect.bottom + 'px';
    menu.classList.remove('yukari');
  } else {
    menu.style.bottom = (window.innerHeight - rect.top) + 'px';
    menu.classList.add('yukari');
  }
  
  menu.style.left = rect.left + 'px';
}

Sürükle-Bırak Sınır Kontrolü

Sürüklenen elementin belirli bir alan içinde kalmasını sağlamak için:

const suruklenebilir = document.querySelector('.suruklenebilir');
const kapsayici = document.querySelector('.kapsayici');

suruklenebilir.addEventListener('drag', function(e) {
  const kapsayiciRect = kapsayici.getBoundingClientRect();
  const elementRect = suruklenebilir.getBoundingClientRect();
  
  // Sınırlar içinde mi kontrol et
  const solSinir = e.clientX >= kapsayiciRect.left;
  const sagSinir = e.clientX <= kapsayiciRect.right - elementRect.width;
  const ustSinir = e.clientY >= kapsayiciRect.top;
  const altSinir = e.clientY <= kapsayiciRect.bottom - elementRect.height;
  
  if (solSinir && sagSinir && ustSinir && altSinir) {
    // Hareket geçerli, konumu güncelle
  }
});

Performans İpuçları

getBoundingClientRect() her çağrıldığında tarayıcı layout hesaplaması yapar. Bu nedenle performans açısından dikkat edilmesi gereken noktalar vardır.

Değeri Önbelleğe Alın: Aynı frame içinde birden fazla kez aynı elementin konumuna ihtiyacınız varsa sonucu bir değişkende saklayın:

// Kötü - her seferinde yeniden hesaplar
element.getBoundingClientRect().top;
element.getBoundingClientRect().left;
element.getBoundingClientRect().width;

// İyi - tek hesaplama
const rect = element.getBoundingClientRect();
rect.top;
rect.left;
rect.width;

Scroll Event'lerinde Throttle Kullanın: Scroll sırasında sürekli çağırmak yerine belirli aralıklarla çağırın:

let sonCalisma = 0;
const bekleme = 100; // 100ms

window.addEventListener('scroll', function() {
  const simdi = Date.now();
  
  if (simdi - sonCalisma >= bekleme) {
    // getBoundingClientRect işlemleri burada
    sonCalisma = simdi;
  }
});

IntersectionObserver Alternatifi: Sadece görünürlük kontrolü yapıyorsanız IntersectionObserver daha performanslı bir alternatiftir:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element görünür oldu');
    }
  });
});

observer.observe(document.querySelector('.hedef'));

Tarayıcı Desteği

getBoundingClientRect() tüm modern tarayıcılarda desteklenir. Internet Explorer dahil olmak üzere çok geniş bir uyumluluk sunar. Bu nedenle polyfill veya alternatif çözüm kullanmanıza gerek yoktur.

Desteklenen tarayıcılar arasında Chrome, Firefox, Safari, Edge ve Opera bulunur. Mobil tarayıcılarda da tam destek mevcuttur.

Sık Yapılan Hatalar

Hata 1: Değerlerin statik olduğunu varsaymak

getBoundingClientRect() anlık değer döndürür. Scroll, resize veya DOM değişikliklerinden sonra değerler farklı olacaktır. Her ihtiyaç duyduğunuzda yeniden çağırın.

Hata 2: Document scroll pozisyonunu unutmak

Eğer sayfanın başından itibaren konum istiyorsanız window.scrollY ve window.scrollX değerlerini eklemeyi unutmayın.

Hata 3: Hidden elementlerde kullanmak

display: none olan elementler için getBoundingClientRect() sıfır değerler döndürür. Element görünür olmalıdır.

const gizli = document.querySelector('.gizli'); // display: none
const rect = gizli.getBoundingClientRect();
// rect.width = 0, rect.height = 0

getBoundingClientRect() JavaScript'te element konumlandırma için en güvenilir yöntemdir. Viewport'a göre konum ve boyut bilgisini tek bir çağrıyla almanızı sağlar. CSS transform değerlerini hesaba katması ve geniş tarayıcı desteği onu tooltip, dropdown, lazy loading ve sürükle-bırak gibi pek çok senaryoda vazgeçilmez kılar.

Metodun döndürdüğü DOMRect nesnesindeki top, left, width, height, right ve bottom özellikleri, sayfadaki herhangi bir elementin tam konumunu belirlemenize yardımcı olur. Performans için değerleri önbelleğe almayı ve scroll event'lerinde throttle kullanmayı unutmayın.

Sıkça Sorulan Sorular

getBoundingClientRect() ile offsetTop arasındaki fark nedir?

offsetTop, elementin en yakın pozisyonlanmış (positioned) parent'ına göre konumu verir. getBoundingClientRect() ise viewport'a göre konum döndürür ve CSS transform değerlerini hesaba katar.

getBoundingClientRect() negatif değer döndürebilir mi?

Evet. Element viewport'un üstünde veya solunda kaldıysa top ve left negatif olabilir. Bu durum element scroll ile ekran dışına çıktığında gerçekleşir.

Her frame'de getBoundingClientRect() çağırmak performansı etkiler mi?

Çok sayıda element için sürekli çağırmak layout thrashing'e neden olabilir. requestAnimationFrame içinde kullanmak ve sonuçları önbelleğe almak performansı artırır.

Web geliştirme ve JavaScript konularında profesyonel destek almak için Blakfy ile iletişime geçin: blakfy.com/iletisim