Come posso ottenere le dimensioni della barra di scorrimento del browser?

Come posso determinare l'altezza di una barra di scorrimento orizzontale o la larghezza di una barra verticale in JavaScript?

Dal blog di Alexandre Gomes non l'ho provato. Fammi sapere se funziona per te.

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

Usando jQuery, puoi abbreviare la risposta di Matthew Vines a:

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

Questo è solo uno script che ho trovato, che funziona nei browser 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;
};

Versione ridotta a icona:

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

E devi chiamarlo quando il documento è pronto ... così

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

Testato il 28/03/2012 su Windows 7 negli ultimi FF, Chrome, IE e Safari e funzionante al 100%.

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

se stai cercando un'operazione semplice, mescola semplicemente dom js e jquery,

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

restituisce le dimensioni della barra di scorrimento della pagina corrente. (se è visibile altrimenti restituirà 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; 
} 

Per me, il modo più utile è stato

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

con JavaScript vaniglia.

Ho trovato una soluzione semplice che funziona per gli elementi all'interno della pagina, anziché per la pagina stessa: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

Ciò restituisce l'altezza della barra di scorrimento dell'asse x.

Dal blog di 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;
}

Mi dà 17 sul mio sito Web, 14 qui su StackOverflow.

Se hai già un elemento con barre di scorrimento su usa:

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

Se non è presente la barra di scorrimento, la funzione eseguirà nuovamente 0

Puoi determinare la windowbarra di scorrimento documentcome di seguito usando jquery + javascript:

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

Il modo Antiscroll.jsin cui lo fa nel suo codice è:

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

Il codice è da qui: 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
    };
},

Testato in Chrome, FF, IE8, IE11.

Questo dovrebbe fare il trucco, no?

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

Crea un vuoto dive assicurati che sia presente su tutte le pagine (es. Inserendolo inheader modello).

Dai questo stile:

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

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

Quindi controlla semplicemente la dimensione di #scrollbar-helpercon Javascript:

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

Non c'è bisogno di calcolare nulla, poiché questo divavrà sempre il widthe heightdel scrollbar.

L'unico aspetto negativo è che ci sarà un vuoto divnei tuoi modelli .. Ma d'altra parte, i tuoi file Javascript saranno più puliti, in quanto ciò richiede solo 1 o 2 righe di codice.

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 maggior parte del browser utilizza 15 px per la larghezza della barra di scorrimento

Con jquery (testato solo su 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;
}

Ma in realtà mi piace la risposta di @ Steve meglio.

Questa è un'ottima risposta: https://stackoverflow.com/a/986977/5914609

Tuttavia nel mio caso non ha funzionato. E ho passato ore a cercare la soluzione.
Finalmente sono tornato al codice sopra e aggiunto! Importante per ogni stile. E ha funzionato.
Non riesco ad aggiungere commenti sotto la risposta originale. Quindi ecco la soluzione:

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

Questa decisione di hacking ti darà l'opportunità di trovare la larghezza scrollY del browser (JavaScript vaniglia). Usando questo esempio puoi ottenere la larghezza scrollY su qualsiasi elemento inclusi quegli elementi che non dovrebbero avere scroll secondo la tua attuale concezione del design:

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

Ecco la soluzione più concisa e di facile lettura basata sulla differenza di larghezza dell'offset:

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;

}

Vedi il JSFiddle .

Già codificato nella mia libreria quindi eccolo qui:

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

Vorrei menzionare che jQuery $(window).width()può anche essere usato al posto di window.document.documentElement.clientWidth.

Non funziona se apri gli strumenti di sviluppo in Firefox a destra ma lo supera se la finestra di sviluppo è aperta in basso!

window.screenè supportato da quirksmode.org !

Divertiti!

Sembra funzionare, ma forse esiste una soluzione più semplice che funziona in tutti i browser?

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