GeezerVison

The World Wide Web, restored to 800 pixels of glory.

GeezerVison is showing it.javascript.info — Qual è la larghezza della barra di scorrimento?

Qual è la larghezza della barra di scorrimento?

importanza: 3

Scrivete il codice che restituisca la larghezza di una barra di scorrimento standard.

Per Windows solitamente varia tra 12px e 20px. Se il browser non le riserva alcuno spazio (capita che la barra di scorrimento appaia semi-opaca sopra il testo), allora può essere 0px.

P.S. Il codice dovrebbe funzionare per ogni documento HTML indipendentemente dal contenuto.

Per ricavare la larghezza della barra di scorrimento, possiamo creare un elemento con scorrimento ma senza bordi e padding.

In quel caso la sottrazione tra la larghezza totale offsetWidth e la larghezza dell’area interna del contenuto clientWidth equivarrà esattamente alla larghezza della barra di scorrimento:

// creiamo un div con scorrimento
let div = document.createElement('div');

div.style.overflowY = 'scroll';
div.style.width = '50px';
div.style.height = '50px';

// dobbiamo inserirlo nel flusso del documento, altrimenti le dimensioni saranno pari a 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);

You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.