ancho de barra de desplazamiento div

Question

¿Hay alguna manera fácil de obtener el ancho de una barra de desplazamiento usando javascript/jquery? Necesito obtener el ancho de un div que se desborda + el ancho que tenga la barra de desplazamiento.

Gracias

Answer 1

si estás usando jQuery, intente esto:

function getScrollbarWidth() 
{ 
    var div = $('<div style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"><div style="height:100px;"></div></div>'); 
    $('body').append(div); 
    var w1 = $('div', div).innerWidth(); 
    div.css('overflow-y', 'auto'); 
    var w2 = $('div', div).innerWidth(); 
    $(div).remove(); 
    return (w1 - w2); 
} 

estoy usando esto en el proyecto que estoy trabajando y funciona como un encanto. se pone la barra de desplazamiento de ancho por:

1. añadiendo un div con el desbordamiento de contenido para el cuerpo (en una zona no visible, -200px a la parte superior/izquierda)
2. conjunto de desbordamiento a hidden
3. obtener el anchura
4. conjunto de desbordamiento a auto (para obtener barras de desplazamiento)
5. obtener el ancho
6. restar ambas anchuras para conseguir la anchura de la barra de desplazamiento

así que lo que usted tiene que hacer es conseguir que el ancho de la div ($('#mydiv').width()) y añadir la barra de desplazamiento de ancho:

var completewidth = $('#mydiv').width() + getScrollbarWidth(); 

Answer 2

Aquí es una llanura javascript versión que es mucho más rápido.

function getScrollbarWidth() { 
    var div, body, W = window.browserScrollbarWidth; 
    if (W === undefined) { 
    body = document.body, div = document.createElement('div'); 
    div.innerHTML = '<div style="width: 50px; height: 50px; position: absolute; left: -100px; top: -100px; overflow: auto;"><div style="width: 1px; height: 100px;"></div></div>'; 
    div = div.firstChild; 
    body.appendChild(div); 
    W = window.browserScrollbarWidth = div.offsetWidth - div.clientWidth; 
    body.removeChild(div); 
    } 
    return W; 
}; 

Answer 3

Configuración de desbordamiento de un div a "scroll" agrega automáticamente scrollbars (incluso si no hay nada dentro, el scrollbars estará allí, pero de color gris). Así que acaba de hacer un div, encontrar el ancho, ajuste de desbordamiento para desplazarse y encontrar la nueva anchura, y devolver la diferencia:

function getScrollBarWidth() { 
    var helper = document.createElement('div'); 
    helper.style = "width: 100px; height: 100px; overflow:hidden;" 
    document.body.appendChild(helper); 
    var bigger = helper.clientWidth; 
    helper.style.overflow = "scroll"; 
    var smaller = helper.clientWidth; 
    document.body.removeChild(helper); 
    return(bigger - smaller); 
} 

Answer 4

probar esto

$("#myDiv")[0].scrollWidth