javascript - style - ¿Cómo puedo obtener los tamaños de la barra de desplazamiento del navegador?

simplebar

Question

¿Cómo puedo determinar la altura de una barra de desplazamiento horizontal, o el ancho de una vertical, en JavaScript?

Answer 1

Con jquery (solo probado en 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;
}

Pero en realidad me gusta más la respuesta de @ Steve.

Answer 2

Cree un div vacío y asegúrese de que esté presente en todas las páginas (es decir, colocándolo en la plantilla del header ).

Dale este estilo:

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

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

Luego simplemente verifique el tamaño de #scrollbar-helper con Javascript:

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

No es necesario calcular nada, ya que este div siempre tendrá el width y height de la scrollbar de scrollbar .

El único inconveniente es que habrá un div vacío en sus plantillas. Pero, por otro lado, sus archivos Javascript serán más limpios, ya que esto solo requiere 1 o 2 líneas de código.

Answer 3

Del 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 da 17 en mi sitio web, 14 aquí en .

Answer 4

Desde Alexandre Gomes Blog No lo he probado. Avíseme si funciona para usted.

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

Answer 5

Encontré una solución simple que funciona para elementos dentro de la página, en lugar de la página en sí: $(''#element'')[0].offsetHeight - $(''#element'')[0].clientHeight

Esto devuelve la altura de la barra de desplazamiento del eje x.

Answer 6

Esta decisión de hackeo de vida le dará la oportunidad de encontrar el ancho del scrollY del navegador (JavaScript simple ). Con este ejemplo, puede obtener el ancho de scrollY en cualquier elemento, incluidos los elementos que no deberían tener que desplazarse de acuerdo con su concepción de diseño actual:

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

Answer 7

Esta es solo la secuencia de comandos que he encontrado, que funciona en navegadores 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;
};

Versión minimizada:

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

Y debe llamarlo cuando el documento esté listo ... entonces

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

Probado el 31/03/2012 en Windows 7 en la última versión de FF, Chrome, IE y Safari y 100% en funcionamiento.

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

Answer 8

Esta es una gran respuesta: https://.com/a/986977/5914609

Sin embargo, en mi caso, no funcionó. Y pasé horas buscando la solución.
Finalmente, he regresado al código anterior y ¡agregado! Importante para cada estilo. Y funcionó.
No puedo agregar comentarios debajo de la respuesta original. Así que aquí está la solución:

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

Answer 9

La forma en que Antiscroll.js hace en su código es:

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

El código es de aquí: https://github.com/LearnBoost/antiscroll/blob/master/antiscroll.js#L447

Answer 10

Para mí, la forma más útil fue

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

con JavaScript vanidoso

Answer 11

Puede determinar la barra de desplazamiento de la window con el document siguiente usando jquery + javascript:

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

Answer 12

Si estás buscando una operación simple, solo mezcla plain dom js y jquery,

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

devuelve el tamaño de la barra de desplazamiento de la página actual. (si es visible o si no devolverá 0)

Answer 13

Si ya tiene un elemento con barras de desplazamiento, use:

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

Si no hay presente horzintscrollbar la función devolverá 0

Answer 14

Usando jQuery, puede acortar la respuesta de 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;
};

Answer 15

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

Probado en Chrome, FF, IE8, IE11.

Answer 16

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

Answer 17

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