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

164

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

glmxndr
quelle
2
Hier ist ein Ausschnitt vom Autor des JQuery Dimension-Plugins. github.com/brandonaaron/jquery-getscrollbarwidth/blob/master/… vielleicht zu spät, um diese Lösung zu geben, aber es scheint mir eine bessere zu sein, IMO.
Yanick Rochon
Schauen Sie sich diese Lösung an: davidwalsh.name/detect-scrollbar-width
GibboK
@GibboK - diese Lösung schlägt fehl - die offsetWidth == clientWidth, also immer Null. Dies wird in Edge IE && Chrome getestet.
beauXjames
1
@beauXjames seltsam, es funktioniert für mich auf FF
GibboK
Diese Frage stellt sich in der Situation, in der sich die Bildlaufleiste an der falschen Stelle befindet (irgendwo in der Mitte des Bildschirms). In dieser Situation möchten Sie wahrscheinlich keine Bildlaufleiste anzeigen. In den meisten Fällen habe ich festgestellt, dass iScroll die perfekte designneutrale Lösung für die Situation ist: iscrolljs.com
JoostS

Antworten:

139

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);
};
Matthew Vines
quelle
2
Die Idee ist genial, ich mache definitiv eine MooTools-Klasse basierend darauf.
Ryan Florence
Ja, ich habe das gleiche Google-Ergebnis. :) Ich versuche dich auf dem Laufenden zu halten.
glmxndr
Wenn Sie Ihr Thema in ein Thema mit unterschiedlich großen Bildlaufleisten ändern, wie hoch ist die Abweichung von der tatsächlichen zur tatsächlichen?
Matthew Vines
1
Siehe hier für Querverweise: stackoverflow.com/questions/3417139/…
Yanick Rochon
6
Gibt unterschiedliche Werte mit unterschiedlichem Seitenzoom zurück. Win7, Opera, FF.
Kolyunya
79

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;
};
Joshua Bambrick
quelle
2
Danke, diese Lösung ist sehr sauber !!
Jherax
4
Würde sich diese Lösung wirklich sauberer anfühlen, wenn der gesamte Quellcode für JQuery zuvor kopiert und eingefügt würde? Denn genau das macht diese Lösung. Diese Frage hat in JQuery keine Antwort verlangt, und es ist durchaus möglich und effizient, diese Aufgabe ohne Verwendung einer Bibliothek auszuführen.
DaemonOfTheWest
5
Wenn Sie JQuery bereits verwenden, ist der Kommentar von Daemon irrelevant. Ja, JQuery hinzuzufügen, um dies zu tun, wäre Unsinn, aber für diejenigen, die JQuery bereits in ihrem Projekt verwenden, ist dies eine viel einfachere Lösung als die akzeptierte.
Tyler Dahle
25

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

Jan Šafránek
quelle
13
width wird IMMER in diesem Code undefiniert sein. könnte genauso gut tun, wenn (wahr) {...}
sstur
3
Korrektur: widthwird immer === das undefiniert erste Mal , wenn die Funktion aufgerufen wird. Bei nachfolgenden Aufrufen der Funktion widthist diese Prüfung bereits eingestellt, diese Prüfung verhindert lediglich, dass die Berechnungen unnötig erneut ausgeführt werden.
MartinAnsty
17
@MartinAnsty Die Variable [width] wird jedoch innerhalb der Funktion deklariert und daher bei jedem Aufruf der Funktion neu erstellt.
MadSkunk
4
@MartinAnsty, wenn Sie sich die Quelle ansehen , wird sie im äußeren Verschluss deklariert.
TheCloudlessSky
3
Um den Punkt von @sstur und @TheCloudlessSky zu verdeutlichen, ist der obige Code nicht der gleiche wie der im Plugin von Ben Alman, und er wird das Ergebnis nicht zwischenspeichern width, sondern jedes Mal neu berechnen. Es funktioniert, aber es ist schrecklich ineffizient. Bitte tun Sie der Welt einen Gefallen und verwenden Sie stattdessen die richtige Version in Almans Plugin.
Hashchange
24

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)

Beep.exe
quelle
10
Dies wird fehlschlagen, falls das Fenster keine Bildlaufleisten hatte (großer Monitor oder kleine Seite / App)
Farid Nouri Neshat
1
Das ist genau das, was ich wollte
Azerafati
16
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; 
} 
Josh Stodola
quelle
Zuerst versuchte ich die akzeptierte Antwort , stellte jedoch fest, dass dies in Firefox unter Windows 8 nicht mehr funktionierte. Ich wechselte zu dieser Variante, die den Job wunderbar macht.
Matijs
1
Kürzerer Code, aber der Browser muss die gesamte Seite neu zeichnen, so dass es sehr langsam ist.
Adrian Maire
11

Für mich war der nützlichste Weg

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

mit Vanille JavaScript.

Geben Sie hier die Bildbeschreibung ein

Andrés Moreno
quelle
Danke @ stephen-kendy. Eine Begrüßung.
Andrés Moreno
3
Genau das, was ich brauchte. Ein Vorschlag: Der zweite Begriff kann durch ersetzt werden document.documentElement.clientWidth. documentElementklarer und sauberer drückt die Absicht aus, das <html>Element zu erhalten.
Jan Miksovsky
9

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.

Memet Olsen
quelle
Tolle Sache!! Du hast meinen Tag gemacht :) Es funktioniert auch mit ".offsetWidth" und ".clientWidth" für Bildlaufleisten auf der y-Achse.
Polosson
1
Scheint leider nicht ganz zuverlässig, zumindest für Breiten. .clientWidth scheint sowohl die Hälfte der Breite der Bildlaufleiste in FireFox als auch in Chrome unter Linux zu enthalten.
Michael Scheper
6

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.

mpen
quelle
4

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

Mons Droide
quelle
Dies ist die bisher beste Antwort. KISS regiert alle
MarcD
4

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

var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );
Bhuwan Prasad Upadhyay
quelle
Beachten Sie, dass innerWidth für IE9 + ist. Ansonsten tolle Lösung.
Pål Thingbø
3

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

Hengjie
quelle
3
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.

Ben
quelle
2

Das sollte den Trick machen, nein?

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

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.

Dieser Typ
quelle
1
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;
  }
allenhwkim
quelle
1
function getScrollBarWidth() {
    return window.innerWidth - document.documentElement.clientWidth;
}

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

Schattenschmutz
quelle
0

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.

ling
quelle
0

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);
};
Max Vetriakov
quelle
0

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;
}
Evgeniy Miroshnichenko
quelle
0

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 .

Slava Fomin II
quelle
0

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ß!

Centurian
quelle
0

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

Goga
quelle