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