Comment puis-je obtenir la barre de défilement du navigateur tailles?

De Alexandre Gomes Blog je n'ai pas essayé. Laissez-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);
};

Ce n'est que le 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 il faut l'appeler lorsque le document est prêt ... donc

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

Testé 2012-03-28 sur Windows 7 dans le dernier FF, Chrome, IE & Safari et 100% de travail.

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

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

Pour moi, la façon la plus utile était

(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)

avec de la vanille JavaScript.

Si vous avez déjà un élément avec les barres de défilement sur l'utilisation des ti:

function getScrollbarHeight(el) {
    return el.getBoundingClientRect().height - el.scrollHeight;
};

Si il n'y a pas de horzintscrollbar présent la fonction de retour chez elle, 0

La façon Antiscroll.js t-il dans son code est:

function scrollbarSize () {
  var div = $(
      '<div class="antiscroll-inner" style="width:50px;height:50px;overflow-y:scroll;'
    + 'position:absolute;top:-200px;left:-200px;"><div style="height:100px;width:100%"/>'
    + '</div>'
  );

  $('body').append(div);
  var w1 = $(div).innerWidth();
  var w2 = $('div', div).innerWidth();
  $(div).remove();

  return w1 - w2;
};

Le code est ici: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447

Cela devrait faire l'affaire, non?

function getScrollbarWidth() {
  return (window.innerWidth - document.documentElement.clientWidth);
}

Créer un vide div et assurez-vous qu'il est présent sur toutes les pages (c'est à dire en le plaçant dans le header modèle).

Lui donner ce style:

#scrollbar-helper {
    //Hide it beyond the borders of the browser
    position: absolute;
    top: -100%;

    //Make sure the scrollbar is always visible
    overflow: scroll;
}

Ensuite il suffit de vérifier pour la taille de #scrollbar-helper avec Javascript:

var scrollbarWidth = document.getElementById('scrollbar-helper').offsetWidth;
var scrollbarHeight = document.getElementById('scrollbar-helper').offsetHeight;

Pas besoin de calculer quoi que ce soit, que cette div sera toujours width et height de la scrollbar.

Le seul inconvénient, c'est qu'il y aura un vide div dans vos templates.. Mais d'un autre côté, vos fichiers Javascript sera plus propre, car cela ne prend que 1 ou 2 lignes de code.

C'est une grande réponse:
https://stackoverflow.com/a/986977/5914609

Toutefois, dans mon cas, il n'a pas de travail. Et j'ai passé des heures à chercher la solution.

Enfin, je suis rentrée à code ci-dessus et ajouté !important pour chaque style. Et cela a fonctionné.

Je ne peux pas ajouter des commentaires en dessous de l'original de la réplique. Voici donc la solution:

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

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

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

  document.body.removeChild (outer);

  return (w1 - w2);
};

Voici la plus concise et facile à lire solution basée sur le décalage de différence de largeur:

function getScrollbarWidth(): number {

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

}

Voir le JSFiddle.