Wie kann ich die Bildlaufleistengröße des Browsers abrufen?

Vom Alexandre Gomes Blog ich habe es nicht ausprobiert. Lassen Sie mich wissen, wenn es für Sie arbeitet.

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

InformationsquelleAutor der Antwort Matthew Vines

Dies ist nur script, das ich gefunden habe, die funktioniert in webkit-Browsern ... 🙂

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

Haben, und Sie haben, es zu nennen, wenn das Dokument fertig ist ... so

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

Getestet 2012-03-28 auf Windows 7 im neuesten FF, Chrome, IE & Safari und 100% arbeiten.

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

InformationsquelleAutor der Antwort Jan Šafránek

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

InformationsquelleAutor der Antwort Josh Stodola

Wenn Sie bereits ein element mit Scrollbalken auf, es zu verwenden:

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

Wenn es keine horzintscrollbar vorhanden, die Funktion wird retun 0

InformationsquelleAutor der Antwort mons droid

Den Weg Antiscroll.js tut es im code 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 ist von hier: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447

InformationsquelleAutor der Antwort Hengjie

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

InformationsquelleAutor der Antwort allenhwkim

Mit jquery (nur getestet im 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;
}

Aber ich habe genau wie @Steve ' s Antwort besser.

InformationsquelleAutor der Antwort ling

Dieser life-hack Entscheidung geben Ihnen die Möglichkeit zu finden browser scrollY Breite (vanilla JavaScript). Mit diesem Beispiel können Sie bekommen scrollY Breite auf jedes element einschließlich derjenigen Elemente, die nicht haben, scrollen Sie nach Ihrer gegenwärtigen Konzeption, in:

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

InformationsquelleAutor der Antwort Evgeniy Miroshnichenko