Obtener el ancho de la barra de desplazamiento usando JavaScript [duplicado]
El siguiente HTML mostrará una barra de desplazamiento en el borde interior derecho de div.container.
¿Es posible determinar el ancho de esa barra de desplazamiento?
<div class="container" style="overflow-y:auto; height:40px;">
<div class="somethingBig"></div>
</div>
Esta función debería darle el ancho de la barra de desplazamiento.
function getScrollbarWidth() {
// 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;
}
Los pasos básicos aquí son:
- Cree un div oculto (exterior) y obtenga su ancho de desplazamiento
- Forzar que las barras de desplazamiento aparezcan en div (exterior) usando la propiedad de desbordamiento de CSS
- Cree un nuevo div (interior) y añádalo al exterior, establezca su ancho en '100%' y obtenga el ancho de desplazamiento
- Calcular el ancho de la barra de desplazamiento en función de las compensaciones recopiladas
Ejemplo de trabajo aquí: http://jsfiddle.net/slavafomin/tsrmgcu9/
Actualizar
Si está usando esto en una aplicación de Windows (metro), asegúrese de configurar la propiedad -ms-overflow-style del div 'externo' en scrollbar; de lo contrario, el ancho no se detectará correctamente. (código actualizado)
Actualización n.° 2 Esto no funcionará en Mac OS con la configuración predeterminada "Mostrar solo barras de desplazamiento al desplazarse" (Yosemite y versiones posteriores).
offsetWidthincluye el ancho de la barra de desplazamiento y clientWidthno. Como regla general, equivale a 14-18 px. Entonces:
let scrollBarWidth = element.offsetWidth - element.clientWidth;
Eso devolverá 0 si el elemento no tiene actualmente una barra de desplazamiento, así que aquí hay una función simple que calcula el ancho de la barra de desplazamiento del navegador creando un elemento temporal que tiene una barra de desplazamiento:
function getScrollBarWidth() {
let el = document.createElement("div");
el.style.cssText = "overflow:scroll; visibility:hidden; position:absolute;";
document.body.appendChild(el);
let width = el.offsetWidth - el.clientWidth;
el.remove();
return width;
}
