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

Voici une méthode simple utilisant jQuery.

var scrollbarWidth = jQuery('div.withScrollBar').get(0).scrollWidth - jQuery('div.withScrollBar').width();

En gros, nous soustrayons la largeur du défilement de la largeur totale, ce qui devrait donner la largeur de la barre de défilement. Bien entendu, vous pouvez mettre en cache la sélection jQuery('div.withScrollBar') afin de ne pas effectuer cette partie deux fois.

Answer 2

En supposant que le conteneur n'apparaît qu'une seule fois sur la page et que vous utilisez jQuery :

var containerEl = $('.container')[0];
var scrollbarWidth = containerEl.offsetWidth - containerEl.clientWidth;

Voir aussi cette réponse pour plus de détails.

Answer 3

J'ai utilisé la fonction next pour obtenir la hauteur/largeur de la barre de défilement :

function getBrowserScrollSize(){

    var css = {
        "border":  "none",
        "height":  "200px",
        "margin":  "0",
        "padding": "0",
        "width":   "200px"
    };

    var inner = $("<div>").css($.extend({}, css));
    var outer = $("<div>").css($.extend({
        "left":       "-1000px",
        "overflow":   "scroll",
        "position":   "absolute",
        "top":        "-1000px"
    }, css)).append(inner).appendTo("body")
    .scrollLeft(1000)
    .scrollTop(1000);

    var scrollSize = {
        "height": (outer.offset().top - inner.offset().top) || 0,
        "width": (outer.offset().left - inner.offset().left) || 0
    };

    outer.remove();
    return scrollSize;
}

Cette solution basée sur jQuery fonctionne dans IE7+ et tous les autres navigateurs modernes (y compris les appareils mobiles où la hauteur/largeur de la barre de défilement sera de 0).

Answer 4

ce ça a marché pour moi

 function getScrollbarWidth() { 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'scroll'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
}