DOMRectReadOnly.bottom — Eigenschaft · JavaScript-Referenz

Signatur

get DOMRectReadOnly.prototype.bottom

Beschreibung

Die schreibgeschützte Eigenschaft bottom gibt die y-Koordinate der unteren Kante eines DOMRectReadOnly (oder des davon abgeleiteten DOMRect) zurück. Der Wert wird berechnet als Math.max(y, y + height). Bei negativer Höhe ist bottom also gleich y.

In der Praxis begegnet man bottom meist über Element.getBoundingClientRect(). Der Wert bezieht sich dort auf den Viewport und nicht auf das Dokument. Damit lässt sich zum Beispiel prüfen, ob ein Element vollständig sichtbar ist, ob es das Seitenende erreicht hat oder wo ein Tooltip oder Dropdown direkt unter einem Element platziert werden soll.

Auch IntersectionObserverEntry.boundingClientRect, ResizeObserverEntry.contentRect und Range.getBoundingClientRect() liefern DOMRectReadOnly- bzw. DOMRect-Objekte mit dieser Eigenschaft.

Rückgabewert

Typ

number

Beschreibung

Die untere Koordinate des Rechtecks in CSS-Pixeln als Gleitkommazahl (double). Bruchteile von Pixeln sind möglich.

Beispiele

Grundlagen: bottom aus einem selbst erzeugten Rechteck

const rect = new DOMRectReadOnly(10, 20, 100, 50);
console.log(rect.bottom); // y + height

// Negative Höhe: bottom entspricht dann y
const flipped = new DOMRectReadOnly(10, 20, 100, -50);
console.log(flipped.bottom, flipped.top);

70 20 -30

Dropdown direkt unter einem Button positionieren

const button = document.querySelector('#menu-button');
const menu = document.querySelector('#menu');

button.addEventListener('click', () => {
  const { left, bottom } = button.getBoundingClientRect();
  // Viewport-Koordinate plus Scroll-Offset = Dokument-Koordinate
  menu.style.position = 'absolute';
  menu.style.left = `${left + window.scrollX}px`;
  menu.style.top = `${bottom + window.scrollY + 4}px`;
  menu.hidden = false;
});

Prüfen, ob ein Element vollständig im Viewport liegt

const isFullyVisible = (el) => {
  const { top, bottom } = el.getBoundingClientRect();
  return top >= 0 && bottom <= window.innerHeight;
};

const footer = document.querySelector('footer');
window.addEventListener('scroll', () => {
  console.log('Footer komplett sichtbar:', isFullyVisible(footer));
}, { passive: true });

Footer komplett sichtbar: false

Mit ResizeObserver auf Höhenänderungen reagieren

const box = document.querySelector('.chat-log');

const observer = new ResizeObserver(([entry]) => {
  // contentRect ist ein DOMRectReadOnly relativ zur Content-Box
  console.log('Untere Kante der Content-Box:', entry.contentRect.bottom);
});

observer.observe(box);

Untere Kante der Content-Box: 320

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie rect.bottom = 5 wird ignoriert und wirft im Strict Mode einen TypeError. Auch bei DOMRect ist bottom nur lesbar. Ändern lässt sich der Wert nur über y oder height.
Bezugssystem: Bei getBoundingClientRect() ist bottom relativ zum Viewport und ändert sich beim Scrollen. Für Dokument-Koordinaten musst du window.scrollY addieren.
Unterschied zu CSS: rect.bottom ist der Abstand der unteren Kante vom oberen Rand des Viewports. Das CSS-bottom misst dagegen vom unteren Rand aus.
Transformationen: getBoundingClientRect() berücksichtigt CSS-Transformationen. bottom beschreibt dann die untere Kante des umschließenden Rechtecks, nicht die Kante des gedrehten Elements.
Performance: Wenn du getBoundingClientRect() ausliest, nachdem Styles geändert wurden, erzwingt das ein synchrones Layout (Reflow). Lies die Werte deshalb gebündelt, etwa in requestAnimationFrame.
Kompatibilität: Wird von allen modernen Browsern unterstützt. Der Konstruktor new DOMRectReadOnly() fehlt im alten Internet Explorer und in Legacy-Edge. Dort lieferte getBoundingClientRect() ein ClientRect, das zwar bottom hat, aber kein x/y.

Siehe auch

DOMRectReadOnly DOMRectReadOnly.top DOMRectReadOnly.height DOMRectReadOnly.y DOMRect Element.getBoundingClientRect() ResizeObserver