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

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

Du blog Alexandre Gomes je ne l'ai pas essayé. Dites-moi si cela marche 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);
};

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

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 lorsque le document est prêt ... alors

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

Testé le 28/03/2012 sur Windows 7 dans les dernières versions de FF, Chrome, IE et Safari et fonctionne à 100%.

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

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. (s'il est visible ou sinon retournera 0)

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, le moyen le plus utile était

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

avec JavaScript vanille.

J'ai trouvé une solution simple qui fonctionne pour les éléments à l'intérieur de la page, au lieu de la page elle-même: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

Cela renvoie la hauteur de la barre de défilement de l'axe x.

Du blog de David Walsh :

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}

Me donne 17 sur mon site Web, 14 ici sur Stackoverflow.

Si vous avez déjà un élément avec des barres de défilement, utilisez:

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

S'il n'y a pas d'horzintscrollbar, la fonction sera relancée 0

Vous pouvez déterminer la windowbarre de défilement avec documentcomme ci-dessous en utilisant jquery + javascript:

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );

Le chemin Antiscroll.js cela fonctionne 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 vient d'ici: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447

detectScrollbarWidthHeight: function() {
    var div = document.createElement("div");
    div.style.overflow = "scroll";
    div.style.visibility = "hidden";
    div.style.position = 'absolute';
    div.style.width = '100px';
    div.style.height = '100px';
    document.body.appendChild(div);

    return {
        width: div.offsetWidth - div.clientWidth,
        height: div.offsetHeight - div.clientHeight
    };
},

Testé dans Chrome, FF, IE8, IE11.

Cela devrait faire l'affaire, non?

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

Créez un vide divet assurez-vous qu'il est présent sur toutes les pages (c'est-à-dire en le mettant dans leheader modèle).

Donnez-lui 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, vérifiez simplement la taille de #scrollbar-helperavec Javascript:

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

Pas besoin de calculer quoi que ce soit, car cela divaura toujours le widthet heightduscrollbar .

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

function getWindowScrollBarHeight() {
    let bodyStyle = window.getComputedStyle(document.body);
    let fullHeight = document.body.scrollHeight;
    let contentsHeight = document.body.getBoundingClientRect().height;
    let marginTop = parseInt(bodyStyle.getPropertyValue('margin-top'), 10);
    let marginBottom = parseInt(bodyStyle.getPropertyValue('margin-bottom'), 10);
    return fullHeight - contentHeight - marginTop - marginBottom;
  }

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

La plupart des navigateurs utilisent 15px pour la largeur de la barre de défilement

Avec jquery (testé uniquement sous Firefox):

function getScrollBarHeight() {
    var jTest = $('<div style="display:none;width:50px;overflow: scroll"><div style="width:100px;"><br /><br /></div></div>');
    $('body').append(jTest);
    var h = jTest.innerHeight();
    jTest.css({
        overflow: 'auto',
        width: '200px'
    });
    var h2 = jTest.innerHeight();
    return h - h2;
}

function getScrollBarWidth() {
    var jTest = $('<div style="display:none;height:50px;overflow: scroll"><div style="height:100px;"></div></div>');
    $('body').append(jTest);
    var w = jTest.innerWidth();
    jTest.css({
        overflow: 'auto',
        height: '200px'
    });
    var w2 = jTest.innerWidth();
    return w - w2;
}

Mais j'aime mieux la réponse de @ Steve.

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

Cependant, dans mon cas, cela n'a pas fonctionné. Et j'ai passé des heures à chercher la solution.
Enfin, je suis revenu au code ci-dessus et j'ai ajouté! Important à chaque style. Et ça a marché.
Je ne peux pas ajouter de commentaires sous la réponse originale. Voici donc le correctif:

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

Cette décision de hack de la vie vous donnera l'opportunité de trouver la largeur de défilement du navigateur (JavaScript vanilla). En utilisant cet exemple, vous pouvez obtenir la largeur de scrollY sur n'importe quel élément, y compris les éléments qui ne devraient pas avoir de défilement en fonction de votre conception actuelle,:

getComputedScrollYWidth     (el)  {

  let displayCSSValue  ; // CSS value
  let overflowYCSSValue; // CSS value

  // SAVE current original STYLES values
  {
    displayCSSValue   = el.style.display;
    overflowYCSSValue = el.style.overflowY;
  }

  // SET TEMPORALLY styles values
  {
    el.style.display   = 'block';
    el.style.overflowY = 'scroll';
  }

  // SAVE SCROLL WIDTH of the current browser.
  const scrollWidth = el.offsetWidth - el.clientWidth;

  // REPLACE temporally STYLES values by original
  {
    el.style.display   = displayCSSValue;
    el.style.overflowY = overflowYCSSValue;
  }

  return scrollWidth;
}

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

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 .

Déjà codé dans ma bibliothèque alors le voici:

var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;

Je dois mentionner que jQuery $(window).width()peut également être utilisé à la place de window.document.documentElement.clientWidth.

Cela ne fonctionne pas si vous ouvrez les outils de développement dans Firefox sur la droite, mais cela le surmonte si la fenêtre de développement est ouverte en bas!

window.screenest pris en charge quirksmode.org !

S'amuser!

Cela semble fonctionner, mais il existe peut-être une solution plus simple qui fonctionne dans tous les navigateurs?

// Create the measurement node
var scrollDiv = document.createElement("div");
scrollDiv.className = "scrollbar-measure";
document.body.appendChild(scrollDiv);

// Get the scrollbar width
var scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
console.info(scrollbarWidth); // Mac:  15

// Delete the DIV 
document.body.removeChild(scrollDiv);

.scrollbar-measure {
	width: 100px;
	height: 100px;
	overflow: scroll;
	position: absolute;
	top: -9999px;
}