Dimensioni della Finestra e Scorrimento in JavaScript

Comprendere le dimensioni della finestra e il comportamento dello scorrimento è fondamentale per creare interfacce web responsive. Questo articolo spiega come misurare il viewport (l'area visibile della pagina), come leggere la dimensione totale del documento, come scoprire fino a dove la pagina è stata scorsa e come scorrere a livello programmatico — incluso lo scorrimento fluido e il posizionamento di un elemento nella vista. Ogni concetto è accompagnato da un esempio eseguibile.

La distinzione fondamentale da tenere a mente: il viewport è ciò che l'utente vede in questo momento, mentre il documento è l'intera pagina, gran parte della quale potrebbe essere fuori dalla vista.

Misurare il Viewport (Finestra Visibile)

Il viewport è il rettangolo della pagina che l'utente vede in questo momento. Ci sono due modi per leggerne le dimensioni, e la differenza è importante.

document.documentElement.clientWidth / clientHeight — la larghezza e l'altezza del viewport escludendo la barra di scorrimento. È la scelta corretta quando è necessaria l'area effettivamente disponibile per il contenuto.
window.innerWidth / innerHeight — l'interno completo della finestra inclusa la larghezza della barra di scorrimento. Utile per controlli rapidi, ma può essere qualche pixel più grande di clientWidth quando è presente una barra di scorrimento.

Usa clientWidth/clientHeight per i calcoli di layout (ad esempio, centrare un elemento); usa innerWidth/innerHeight per controlli in stile breakpoint dove pochi pixel non hanno importanza.

// 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);

L'esempio seguente mostra le dimensioni del viewport in tempo reale e si aggiorna ogni volta che la finestra viene ridimensionata.

<!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>

Provalo tu stesso »

Misurare la Dimensione Totale del Documento

Per ottenere l'altezza dell'intera pagina — inclusa la parte scorsa fuori dalla vista — leggi le proprietà scroll* dell'elemento documento. A causa di incongruenze storiche tra i browser, il modo affidabile è prendere il valore massimo tra diverse misurazioni:

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);

Questo è esattamente il valore necessario per creare una barra di avanzamento, un trigger per lo scorrimento infinito ("sono vicino al fondo?") o un pulsante "scorri in fondo". scrollWidth funziona allo stesso modo per l'overflow orizzontale.

Leggere la Posizione di Scorrimento Corrente

Per scoprire fino a dove la pagina è stata scorsa, usa:

window.scrollX — offset di scorrimento orizzontale in pixel (chiamato anche window.pageXOffset, un alias più vecchio).
window.scrollY — offset di scorrimento verticale in pixel (alias window.pageYOffset).

scrollX/scrollY sono i nomi moderni; pageXOffset/pageYOffset sono identici e ancora supportati per la compatibilità con le versioni precedenti.

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

Scorrere a Livello Programmatico

La finestra espone tre metodi per spostare la pagina manualmente.

window.scrollTo(x, y) — scorre fino a una posizione assoluta. scrollTo(0, 0) torna all'inizio.
window.scrollBy(dx, dy) — scorre relativamente alla posizione corrente. scrollBy(0, 100) sposta di 100px verso il basso rispetto alla posizione attuale.
element.scrollIntoView() — scorre finché un elemento specifico diventa visibile.

Tutti e tre accettano un oggetto opzioni con behavior: 'smooth' per uno scorrimento animato invece di un salto immediato:

// 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' });

Scorrimento Fluido verso un Elemento

scrollIntoView è il modo più semplice per saltare a una sezione — ad esempio, un pulsante "torna in cima" o "vai ai commenti". Passando { behavior: 'smooth' } si anima il movimento:

<!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>

Provalo tu stesso »

Tracciare la Posizione di Scorrimento

Crea effetti dinamici basati sulla posizione di scorrimento dell'utente. L'esempio seguente aggiorna un elemento fisso per mostrare l'offset di scorrimento verticale corrente ad ogni evento scroll.

<!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>

Provalo tu stesso »

Nota: per un supporto browser più ampio, document.documentElement.scrollTop può essere usato come alternativa a window.scrollY.

Trovare la Posizione di un Elemento con getBoundingClientRect

element.getBoundingClientRect() restituisce la dimensione dell'elemento e la sua posizione relativa al viewport (non al documento). L'oggetto restituito ha top, bottom, left, right, width e height.

Poiché i valori sono relativi al viewport, cambiano durante lo scorrimento. Per convertire la posizione di un elemento in coordinate del documento, aggiungi l'offset di scorrimento corrente:

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);

Un uso comune è verificare se un elemento è attualmente visibile sullo schermo:

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

Per un approfondimento sulla differenza tra coordinate del viewport e del documento, consulta Coordinate JavaScript.

Personalizzare le Barre di Scorrimento per un Aspetto Migliore

Le barre di scorrimento personalizzate possono migliorare l'aspetto visivo del tuo sito web:

<!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>

Provalo tu stesso »

In questo esempio abbiamo usato pseudo-elementi per selezionare e stilizzare le diverse parti della barra di scorrimento. Ecco una descrizione di ogni proprietà CSS utilizzata:

::-webkit-scrollbar: questo pseudo-elemento seleziona la barra di scorrimento stessa. Abbiamo impostato la sua larghezza a 12 pixel, che determina lo spessore della barra di scorrimento.
::-webkit-scrollbar-track: questo pseudo-elemento rappresenta il binario (o canale) su cui scorre il cursore della barra di scorrimento. L'abbiamo stilizzato con uno sfondo blu scuro. I colori utilizzati qui sono stati scelti per mostrare la differenza tra le varie parti della barra di scorrimento. Per un'applicazione reale si consiglia l'uso di colori più sobri.
::-webkit-scrollbar-thumb: questo pseudo-elemento seleziona la parte trascinabile della barra di scorrimento, nota come cursore. Abbiamo scelto un verde chiaro per il cursore, in modo che si distingua dal binario per una migliore visibilità. border-radius: 10px applica angoli arrotondati al cursore, conferendogli un aspetto moderno ed elegante. Viene usato anche un bordo di 3 pixel solido color ciano scuro.

Nota: i pseudo-elementi ::-webkit-scrollbar sono specifici dei browser basati su Chromium. Per Firefox e gli standard moderni, considera l'utilizzo delle proprietà CSS scrollbar-width e scrollbar-color. Esempio: scrollbar-width: thin; scrollbar-color: lightgreen darkblue;

Conclusione

Padroneggiando le tecniche di dimensionamento della finestra e scorrimento in JavaScript, puoi migliorare notevolmente l'esperienza utente e la responsività dei tuoi progetti web. Ricorda la distinzione fondamentale — clientWidth/clientHeight misurano il viewport visibile, le proprietà scroll* misurano il documento completo e scrollX/scrollY (alias pageXOffset/pageYOffset) indicano fino a dove hai scorso. Usa scrollTo, scrollBy e scrollIntoView con behavior: 'smooth' per spostare la pagina a livello programmatico.

Per continuare, esplora:

Scorrimento JavaScript — eventi e pattern per reagire allo scorrimento.
Coordinate JavaScript — sistemi di coordinate del viewport e del documento in dettaglio.
Lavorare con gli Stili nel DOM — leggi e modifica gli stili degli elementi, incluse le dimensioni discusse qui.

Esercitazione

Pratica

Quali metodi possono essere usati per misurare le dimensioni e lo scorrimento in JavaScript?

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