Comment puis-je obtenir les tailles des barres de défilement du navigateur ?

Question

Comment puis-je déterminer la hauteur d'une barre de défilement horizontale ou la largeur d'une barre verticale en JavaScript ?

Answer 1

Desde Blog d'Alexandre Gomes Je ne l'ai pas essayé. Faites-moi savoir si cela fonctionne pour vous.

function getScrollBarWidth () {
  var inner = document.createElement('p');
  inner.style.width = "100%";
  inner.style.height = "200px";

  var outer = document.createElement('div');
  outer.style.position = "absolute";
  outer.style.top = "0px";
  outer.style.left = "0px";
  outer.style.visibility = "hidden";
  outer.style.width = "200px";
  outer.style.height = "150px";
  outer.style.overflow = "hidden";
  outer.appendChild (inner);

  document.body.appendChild (outer);
  var w1 = inner.offsetWidth;
  outer.style.overflow = 'scroll';
  var w2 = inner.offsetWidth;
  if (w1 == w2) w2 = outer.clientWidth;

  document.body.removeChild (outer);

  return (w1 - w2);
};

Answer 2

En utilisant jQuery, vous pouvez raccourcir la réponse de Matthew Vines à :

function getScrollBarWidth () {
    var $outer = $('<div>').css({visibility: 'hidden', width: 100, overflow: 'scroll'}).appendTo('body'),
        widthWithScroll = $('<div>').css({width: '100%'}).appendTo($outer).outerWidth();
    $outer.remove();
    return 100 - widthWithScroll;
};

Answer 3

C'est le seul script que j'ai trouvé, qui fonctionne dans les navigateurs webkit ... :)

$.scrollbarWidth = function() {
  var parent, child, width;

  if(width===undefined) {
    parent = $('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');
    child=parent.children();
    width=child.innerWidth()-child.height(99).innerWidth();
    parent.remove();
  }

 return width;
};

Version réduite :

$.scrollbarWidth=function(){var a,b,c;if(c===undefined){a=$('<div style="width:50px;height:50px;overflow:auto"><div/></div>').appendTo('body');b=a.children();c=b.innerWidth()-b.height(99).innerWidth();a.remove()}return c};

Et vous devez l'appeler quand le document est prêt ... donc

$(function(){ console.log($.scrollbarWidth()); });

Testé le 2012-03-28 sur Windows 7 avec les dernières versions de FF, Chrome, IE et Safari et 100% de fonctionnement.

source : http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth

Answer 4

Si vous cherchez une opération simple, mélangez simplement dom js et jquery,

var swidth=(window.innerWidth-$(window).width());

renvoie la taille de la barre de défilement de la page actuelle. (si elle est visible, sinon elle retournera 0)

Answer 5

window.scrollBarWidth = function() {
  document.body.style.overflow = 'hidden'; 
  var width = document.body.clientWidth;
  document.body.style.overflow = 'scroll'; 
  width -= document.body.clientWidth; 
  if(!width) width = document.body.offsetWidth - document.body.clientWidth;
  document.body.style.overflow = ''; 
  return width; 
}