JavaScript Fenstergrößen und Scrollen

Das Verständnis von Fenstergrößen und Scrollverhalten ist essenziell für den Aufbau responsiver Weboberflächen. Dieser Artikel behandelt, wie man den Viewport (den sichtbaren Bereich der Seite) misst, wie man die vollständige Größe des Dokuments ausliest, wie man herausfindet, wie weit die Seite gescrollt wurde, und wie man programmatisch scrollt — einschließlich sanftem Scrollen und dem Scrollen eines Elements in den sichtbaren Bereich. Zu jedem Konzept gibt es ein lauffähiges Beispiel.

Die wichtigste Unterscheidung, die man im Kopf behalten sollte: Der Viewport ist das, was der Nutzer aktuell sehen kann, während das Dokument die gesamte Seite ist, von der ein Großteil möglicherweise außerhalb des sichtbaren Bereichs liegt.

Den Viewport (sichtbares Fenster) messen

Der Viewport ist der Bereich der Seite, den der Nutzer gerade sieht. Es gibt zwei Möglichkeiten, seine Größe auszulesen, und der Unterschied ist wichtig.

document.documentElement.clientWidth / clientHeight — die Breite und Höhe des Viewports ohne die Scrollleiste. Dies ist die richtige Wahl, wenn Sie die tatsächlich für Inhalte verfügbare Fläche benötigen.
window.innerWidth / innerHeight — der gesamte Fensterinnenraum einschließlich der Breite der Scrollleiste. Praktisch für schnelle Prüfungen, kann aber ein paar Pixel größer sein als clientWidth, wenn eine Scrollleiste vorhanden ist.

Verwenden Sie clientWidth/clientHeight, wenn Sie Layoutberechnungen durchführen (z. B. das Zentrieren eines Elements); verwenden Sie innerWidth/innerHeight für Breakpoint-artige Prüfungen, bei denen ein paar Pixel keine Rolle spielen.

// Viewport size excluding the scrollbar (recommended for layout)
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);

// Window interior including the scrollbar
console.log(window.innerWidth);
console.log(window.innerHeight);

Das folgende Beispiel zeigt die Viewport-Größe live an und aktualisiert sie, sobald das Fenster in der Größe verändert wird.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Window Size Display</title>
</head>
<body>
    <div id="window-info"></div>
    <script>
        function displayWindowSize() {
            const w = document.documentElement.clientWidth;
            const h = document.documentElement.clientHeight;
            document.getElementById('window-info').innerHTML =
                'Viewport width: ' + w + 'px<br>' +
                'Viewport height: ' + h + 'px';
        }
        window.addEventListener('resize', displayWindowSize);
        window.addEventListener('load', displayWindowSize);
    </script>
</body>
</html>

Probier es selbst »

Die vollständige Dokumentgröße messen

Um die Höhe der gesamten Seite zu ermitteln — einschließlich des Teils, der außerhalb des sichtbaren Bereichs gescrollt ist — lesen Sie die scroll*-Eigenschaften des Dokumentelements aus. Aufgrund historischer Browser-Inkonsistenzen ist es zuverlässig, das Maximum mehrerer Messungen zu bilden:

const scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
console.log('Full document height: ' + scrollHeight);

Dies ist genau der Wert, den Sie benötigen, um eine Fortschrittsleiste, einen Infinite-Scroll-Auslöser („bin ich in der Nähe des Endes?") oder eine „zum Ende scrollen"-Schaltfläche zu erstellen. scrollWidth funktioniert auf die gleiche Weise für horizontalen Überlauf.

Die aktuelle Scrollposition auslesen

Um herauszufinden, wie weit die Seite gescrollt wurde, verwenden Sie:

window.scrollX — horizontaler Scroll-Offset in Pixeln (auch window.pageXOffset genannt, ein älterer Alias).
window.scrollY — vertikaler Scroll-Offset in Pixeln (Alias window.pageYOffset).

scrollX/scrollY sind die modernen Bezeichnungen; pageXOffset/pageYOffset sind identisch und werden weiterhin aus Gründen der Abwärtskompatibilität unterstützt.

console.log(window.scrollX); // same as window.pageXOffset
console.log(window.scrollY); // same as window.pageYOffset

Programmatisch scrollen

Das Fenster stellt drei Methoden bereit, um die Seite selbst zu bewegen.

window.scrollTo(x, y) — scrollt zu einer absoluten Position. scrollTo(0, 0) kehrt zum Anfang zurück.
window.scrollBy(dx, dy) — scrollt relativ zur aktuellen Position. scrollBy(0, 100) bewegt die Seite 100px nach unten, ausgehend von der aktuellen Position.
element.scrollIntoView() — scrollt so, dass ein bestimmtes Element sichtbar wird.

Alle drei akzeptieren ein Optionsobjekt mit behavior: 'smooth' für einen animierten Scrollvorgang anstelle eines sofortigen Sprungs:

// Smoothly scroll back to the top of the page
window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

// Nudge the page down by one viewport height
window.scrollBy({ top: window.innerHeight, behavior: 'smooth' });

Sanftes Scrollen zu einem Element

scrollIntoView ist die einfachste Möglichkeit, zu einem Abschnitt zu springen — zum Beispiel für eine „Nach oben"- oder „Zu den Kommentaren"-Schaltfläche. Wird { behavior: 'smooth' } übergeben, wird die Bewegung animiert:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Smooth Scrolling</title>
</head>
<body>
    <button onclick="document.getElementById('target').scrollIntoView({ behavior: 'smooth' });">Go to Target</button>
    <div style="height: 2000px;">
        <div id="target" style="margin-top: 1800px;">Target Element</div>
    </div>
</body>
</html>

Probier es selbst »

Die Scrollposition verfolgen

Erstellen Sie dynamische Effekte basierend auf der Scrollposition des Nutzers. Das folgende Beispiel aktualisiert ein fixiertes Element, um bei jedem scroll-Ereignis den aktuellen vertikalen Scroll-Offset anzuzeigen.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Scroll Position Detector</title>
</head>
<body>
    <div style="height: 3000px;">
      <div style="position: fixed;">Scroll position: <span id="position">0</span>px</div>
    </div>
    <script>
        const positionSpan = document.getElementById('position');
        window.addEventListener('scroll', function() {
            positionSpan.innerHTML = window.scrollY;
        });
    </script>
</body>
</html>

Probier es selbst »

Hinweis: Für eine breitere Browserunterstützung kann document.documentElement.scrollTop als Fallback für window.scrollY verwendet werden.

Die Position eines Elements mit getBoundingClientRect ermitteln

element.getBoundingClientRect() gibt die Größe des Elements und seine Position relativ zum Viewport zurück (nicht zum Dokument). Das zurückgegebene Objekt enthält top, bottom, left, right, width und height.

Da die Werte viewport-relativ sind, ändern sie sich beim Scrollen. Um die Position eines Elements in Dokumentkoordinaten umzurechnen, addieren Sie den aktuellen Scroll-Offset:

const box = element.getBoundingClientRect();

// Distance from the top of the viewport (changes while scrolling)
console.log(box.top);

// Distance from the top of the whole document (stable)
const documentTop = box.top + window.scrollY;
console.log(documentTop);

Ein häufiger Anwendungsfall ist die Prüfung, ob ein Element gerade auf dem Bildschirm sichtbar ist:

function isInViewport(el) {
  const r = el.getBoundingClientRect();
  return r.top >= 0 &&
         r.bottom <= document.documentElement.clientHeight;
}

Für einen tieferen Einblick in den Unterschied zwischen Viewport- und Dokumentkoordinaten siehe JavaScript-Koordinaten.

Scrollleisten für eine verbesserte Optik anpassen

Benutzerdefinierte Scrollleisten können die visuelle Attraktivität Ihrer Website steigern:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Scrollbars</title>
    <style>
        body {
            height: 2000px; /* For demonstration */
        }
        /* Custom scrollbar styling */
        ::-webkit-scrollbar {
            width: 12px;
        }
        ::-webkit-scrollbar-track {
            background: darkblue;
        }
        ::-webkit-scrollbar-thumb {
            background-color: lightgreen;
            border-radius: 10px;
            border: 3px solid darkcyan;
        }
    </style>
</head>
<body>
    Scroll to see the custom scrollbar!
</body>
</html>

Probier es selbst »

In diesem Beispiel haben wir Pseudo-Elemente verwendet, um verschiedene Teile der Scrollleiste auszuwählen und zu gestalten. Hier ist eine Aufschlüsselung jeder verwendeten CSS-Eigenschaft:

::-webkit-scrollbar: Dieses Pseudo-Element zielt auf die Scrollleiste selbst ab. Wir haben ihre Breite auf 12 Pixel festgelegt, was die Dicke der Scrollleiste bestimmt.
::-webkit-scrollbar-track: Dieses Pseudo-Element stellt die Spur (oder Rille) dar, in der sich der Scrollleisten-Thumb bewegt. Wir haben sie mit einem dunkelblauen Hintergrund gestaltet. Die hier verwendeten Farben wurden so gewählt, dass der Unterschied zwischen den einzelnen Teilen der Scrollleiste deutlich wird. Für eine reale Anwendung werden dezentere Farben empfohlen.
::-webkit-scrollbar-thumb: Dieses Pseudo-Element zielt auf den ziehbaren Teil der Scrollleiste ab, der als Thumb bezeichnet wird. Wir haben ein helles Grün für den Thumb gewählt, damit er sich für eine bessere Sichtbarkeit von der Spur abhebt. border-radius: 10px verleiht dem Thumb abgerundete Ecken und damit ein modernes, elegantes Aussehen. Zusätzlich wird ein 3 Pixel breiter, durchgezogener dunkelcyanfarbener Rand verwendet.

Hinweis: Die ::-webkit-scrollbar-Pseudo-Elemente sind spezifisch für Chromium-basierte Browser. Für Firefox und moderne Standards sollten die CSS-Eigenschaften scrollbar-width und scrollbar-color verwendet werden. Beispiel: scrollbar-width: thin; scrollbar-color: lightgreen darkblue;

Fazit

Durch die Beherrschung von Fenstergrößen- und Scrolltechniken in JavaScript können Sie die Benutzererfahrung und Reaktionsfähigkeit Ihrer Webprojekte erheblich verbessern. Denken Sie an die zentrale Unterscheidung — clientWidth/clientHeight messen den sichtbaren Viewport, die scroll*-Eigenschaften messen das gesamte Dokument, und scrollX/scrollY (auch bekannt als pageXOffset/pageYOffset) sagen Ihnen, wie weit Sie gescrollt haben. Verwenden Sie scrollTo, scrollBy und scrollIntoView mit behavior: 'smooth', um die Seite selbst zu bewegen.

Erkunden Sie als Nächstes:

JavaScript-Scrolling — Ereignisse und Muster zur Reaktion auf Scrollvorgänge.
JavaScript-Koordinaten — Viewport- vs. Dokumentkoordinatensysteme im Detail.
Mit Stilen im DOM arbeiten — Elementstile lesen und ändern, einschließlich der hier besprochenen Abmessungen.

Übung

What methods can be used to measure the sizes and scrollings in JavaScript?

window.innerWidth/innerHeightdocument.clientTop/clientLeftdocument.documentElement.clientWidth/clientHeightwindow.scrollX/scrollYwindow.documentBody.scrollWidth