Wie kann ich die Größe der Bildlaufleisten des Browsers ermitteln?

Wie kann ich in JavaScript die Höhe einer horizontalen Bildlaufleiste oder die Breite einer vertikalen Bildlaufleiste bestimmen?

Von Alexandre Gomes Blog habe ich es nicht ausprobiert. Lassen Sie mich wissen, ob es für Sie funktioniert.

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

Mit jQuery können Sie die Antwort von Matthew Vines verkürzen auf:

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

Dies ist nur ein Skript, das ich gefunden habe und das in Webkit-Browsern funktioniert ... :)

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

Minimierte Version:

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

Und Sie müssen es aufrufen, wenn das Dokument fertig ist ... also

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

Getestet am 28.03.2012 unter Windows 7 in den neuesten Versionen von FF, Chrome, IE und Safari und zu 100% funktionsfähig.

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

Wenn Sie nach einer einfachen Operation suchen, mischen Sie einfach einfache Dom Js und JQuery.

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

Gibt die Größe der aktuellen Seiten-Bildlaufleiste zurück. (wenn es sichtbar ist oder sonst 0 zurückgibt)

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

Für mich war der nützlichste Weg

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

mit Vanille JavaScript.

Ich habe eine einfache Lösung gefunden, die für Elemente innerhalb der Seite anstelle der Seite selbst funktioniert: $('#element')[0].offsetHeight - $('#element')[0].clientHeight

Dies gibt die Höhe der x-Achsen-Bildlaufleiste zurück.

Aus David Walshs Blog :

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

Gibt mir 17 auf meiner Website, 14 hier auf Stackoverflow.

Wenn Sie bereits ein Element mit Bildlaufleisten haben, verwenden Sie:

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

Wenn keine Horzintscrollbar vorhanden ist, wird die Funktion erneut gestartet

Sie können die windowBildlaufleiste documentwie folgt mit jquery + javascript bestimmen :

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

Die Art und Weise, Antiscroll.jswie es in seinem Code funktioniert, ist:

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

Der Code stammt von hier: 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
    };
},

Getestet in Chrome, FF, IE8, IE11.

Das sollte den Trick machen, nein?

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

Erstellen Sie ein leeres divund stellen Sie sicher, dass es auf allen Seiten vorhanden ist (dh indem Sie es in das Feld einfügenheader Vorlage einfügen).

Geben Sie ihm dieses Styling:

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

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

Dann überprüfen Sie einfach die Größe #scrollbar-helpermit Javascript:

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

Sie müssen nichts berechnen, da dies divimmer das widthund heightdes hat scrollbar.

Der einzige Nachteil ist, dass divIhre Vorlagen leer sind . Andererseits sind Ihre Javascript-Dateien sauberer, da dies nur 1 oder 2 Codezeilen erfordert.

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

Die meisten Browser verwenden 15px für die Breite der Bildlaufleiste

Mit jquery (nur in Firefox getestet):

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

Aber ich mag @ Steves Antwort tatsächlich besser.

Dies ist eine großartige Antwort: https://stackoverflow.com/a/986977/5914609

In meinem Fall hat es jedoch nicht funktioniert. Und ich habe stundenlang nach der Lösung gesucht.
Schließlich bin ich zum obigen Code zurückgekehrt und habe hinzugefügt! Wichtig für jeden Stil. Und es hat funktioniert.
Ich kann unter der ursprünglichen Antwort keine Kommentare hinzufügen. Also hier ist das Update:

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

Diese Life-Hack-Entscheidung gibt Ihnen die Möglichkeit, die Scroll-Breite des Browsers (Vanille-JavaScript) zu ermitteln. Anhand dieses Beispiels können Sie die scrollY-Breite für jedes Element ermitteln, einschließlich der Elemente, für die gemäß Ihrer aktuellen Designkonzeption kein Scroll erforderlich sein sollte:

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

Hier ist die präzisere und besser lesbare Lösung, die auf dem Unterschied der Versatzbreite basiert:

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;

}

Siehe die JSFiddle .

Bereits in meiner Bibliothek codiert, also hier ist es:

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

Ich sollte erwähnen, dass jQuery $(window).width()auch anstelle von verwendet werden kann window.document.documentElement.clientWidth.

Es funktioniert nicht, wenn Sie die Entwicklertools in Firefox auf der rechten Seite öffnen, aber es überwindet es, wenn das Entwicklerfenster unten geöffnet wird!

window.screenwird unterstützt quirksmode.org !

Habe Spaß!

Es scheint zu funktionieren, aber vielleicht gibt es eine einfachere Lösung, die in allen Browsern funktioniert?

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