Quelle est la largeur de la barre de défilement ?

Écrivez le code qui renvoie la largeur d’une barre de défilement standard.

Pour Windows, il varie généralement entre 12px et 20px. Si le navigateur ne lui réserve pas d’espace (la barre de défilement est à moitié translucide sur le texte, cela arrive également), alors il peut s’agir de 0px.

P.S. Le code devrait fonctionner pour tout document HTML, ne dépend pas de son contenu.

Pour obtenir la largeur de la barre de défilement, nous pouvons créer un élément avec le défilement, mais sans bordures ni paddings.

Ensuite, la différence entre sa largeur totale offsetWidth et la largeur de la zone de contenu interne clientWidth sera exactement la barre de défilement :

// créer une div avec le défilement
let div = document.createElement('div');

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

// doit le mettre dans le document, sinon les tailles seront 0
document.body.append(div);
let scrollWidth = div.offsetWidth - div.clientWidth;

div.remove();

alert(scrollWidth);