Obtenir la largeur de la barre de défilement en utilisant JavaScript

Question

Le code HTML suivant affichera une barre de défilement sur le bord intérieur droit de div.container.

Est-il possible de déterminer la largeur de cette barre de défilement ?

<div class="container" style="overflow-y:auto; height:40px;">
  <div class="somethingBig"></div>
</div>

Answer 1

Cette fonction devrait vous donner la largeur de la barre de défilement.

function getScrollbarWidth() {

  // Creating invisible container
  const outer = document.createElement('div');
  outer.style.visibility = 'hidden';
  outer.style.overflow = 'scroll'; // forcing scrollbar to appear
  outer.style.msOverflowStyle = 'scrollbar'; // needed for WinJS apps
  document.body.appendChild(outer);

  // Creating inner element and placing it in the container
  const inner = document.createElement('div');
  outer.appendChild(inner);

  // Calculating difference between container's full width and the child width
  const scrollbarWidth = (outer.offsetWidth - inner.offsetWidth);

  // Removing temporary elements from the DOM
  outer.parentNode.removeChild(outer);

  return scrollbarWidth;

}

Les étapes de base sont ici :

1. Créez un div caché (extérieur) et obtenez sa largeur décalée.
2. Obliger les barres de défilement à apparaître dans le div (extérieur) à l'aide de la propriété CSS overflow
3. Créez un nouveau div (inner) et ajoutez-le à outer, définissez sa largeur à '100%' et obtenez la largeur du décalage.
4. Calculer la largeur de la barre de défilement en fonction des décalages rassemblés

Exemple de travail ici : http://jsfiddle.net/slavafomin/tsrmgcu9/

Mise à jour

Si vous l'utilisez sur une application Windows (métro), assurez-vous de définir l'option -ms-overflow-style de la div "externe" à scrollbar sinon la largeur ne sera pas correctement détectée. (code mis à jour)

Mise à jour n°2 Cela ne fonctionnera pas sur Mac OS avec le paramètre par défaut "Only show scrollbars when scrolling" (Yosemite et plus).

Answer 2

// largeur de décalage comprend la largeur de la barre de défilement et largeur du client ne le fait pas. En règle générale, elle est égale à 14-18px. donc :

 var scrollBarWidth = element.offsetWidth - element.clientWidth;

Answer 3

Je pense que ce sera simple et rapide -

var scrollWidth= window.innerWidth-$(document).width()

Answer 4

Si l'enfant occupe toute la largeur du conteneur sans la barre de défilement (par défaut), vous pouvez alors soustraire les largeurs :

var child = document.querySelector(".somethingBig");
var scrollbarWidth = child.parentNode.offsetWidth - child.offsetWidth;

Answer 5

Si vous utilisez Jquery. ui essayez ce code :

$.position.scrollbarWidth()