¿Cómo puedo determinar la altura de una barra de desplazamiento horizontal, o el ancho de una barra vertical, en JavaScript?
¿Cómo puedo determinar la altura de una barra de desplazamiento horizontal, o el ancho de una barra vertical, en JavaScript?
Respuestas:
Desde el blog de Alexandre Gomes no lo he probado. Avísame si te funciona.
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, 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;
};
Este es solo el script que he encontrado, que funciona en los 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 ... así que
$(function(){ console.log($.scrollbarWidth()); });
Probado el 28/03/2012 en Windows 7 en las últimas versiones de FF, Chrome, IE y Safari y funciona al 100%.
fuente: http://benalman.com/projects/jquery-misc-plugins/#scrollbarwidth
width
será siempre === sin definir la primera vez que la función se llama. En llamadas posteriores a la función width
ya está configurada, esa verificación solo evita que los cálculos se ejecuten nuevamente innecesariamente.
width
, sino que lo recalculará cada vez. Funciona, pero es terriblemente ineficiente. Hazle un favor al mundo y usa la versión correcta en el complemento de Alman.
si está buscando una operación simple, simplemente mezcle 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)
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;
}
Para mí, la forma más útil fue
(window.innerWidth - document.getElementsByTagName('html')[0].clientWidth)
con JavaScript vainilla.
document.documentElement.clientWidth
. documentElement
expresa más clara y limpiamente la intención de obtener el <html>
elemento.
Encontré una solución simple que funciona para los 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.
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 Stackoverflow.
Si ya tiene un elemento con barras de desplazamiento, use:
function getScrollbarHeight(el) {
return el.getBoundingClientRect().height - el.scrollHeight;
};
Si no hay horzintscrollbar presente, la función volverá a ejecutar 0
Puede determinar la window
barra de desplazamiento de la document
siguiente manera usando jquery + javascript:
var scrollbarWidth = ($(document).width() - window.innerWidth);
console.info("Window Scroll Bar Width=" + scrollbarWidth );
La forma en Antiscroll.js
que lo 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
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.
Cree un espacio vacío div
y asegúrese de que esté presente en todas las páginas (es decir, colocándolo en elheader
plantilla).
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 esto div
siempre tendrá el width
y height
del scrollbar
.
El único inconveniente es que habrá div
plantillas vacías en sus plantillas. Pero, por otro lado, sus archivos Javascript estarán más limpios, ya que esto solo requiere 1 o 2 líneas de código.
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 mayoría del navegador usa 15px para el ancho de la barra de desplazamiento
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.
Esta es una gran respuesta: https://stackoverflow.com/a/986977/5914609
Sin embargo, en mi caso no funcionó. Y pasé horas buscando la solución.
Finalmente, volví al código anterior y agregué! Importante a 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);
};
Esta decisión de pirateo le dará la oportunidad de encontrar el ancho de desplazamiento del navegador (JavaScript estándar ). Con este ejemplo, puede obtener el ancho de desplazamiento en cualquier elemento, incluidos los elementos que no deberían tener desplazamiento 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;
}
Aquí está la solución más concisa y fácil de leer basada en la diferencia de ancho de desplazamiento:
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;
}
Ver el JSFiddle .
Ya codificado en mi biblioteca, así que aquí está:
var vScrollWidth = window.screen.width - window.document.documentElement.clientWidth;
Debo mencionar que jQuery $(window).width()
también se puede usar en lugar de window.document.documentElement.clientWidth
.
No funciona si abre las herramientas de desarrollador en Firefox a la derecha, pero lo supera si la ventana de desarrollo se abre en la parte inferior.
window.screen
es compatible quirksmode.org !
¡Que te diviertas!
Parece funcionar, pero ¿tal vez hay una solución más simple que funcione en todos los navegadores?
// 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;
}