cómo obtener el ancho interno de un elemento en jquery SIN la barra de desplazamiento

Question

Dado un div que tiene una barra de desplazamiento (por ejemplo, b/c de desbordamiento: automático), ¿cómo obtengo el ancho interior exacto del elemento? En mi ejemplo: http://jsfiddle.net/forgetcolor/2J7NJ/ width e innerWidth informan el mismo ancho. El número Quiero debe ser inferior a 100.

HTML:

<div id='box1'> 
<div id='box2'> 
</div> 
</div> 
<p id="w"></p> 
<p id="iw"></p>​ 

CSS:

#box1 { 
    width:100px; 
    height:100px; 
    overflow:auto; 
} 

#box2 { 
    width:200px; 
    height:200px; 
    background-color:#aaa; 
} 

Javascript:

$('#w').text("width is: "+$('#box1').width()); 
$('#iw').text("inner width is: "+$('#box1').innerWidth());​ 

Actualización:

Necesito esto para trabajar cuando el box2 div con contiene una imagen grande (por lo tanto, toma un segundo para cargar). Aquí hay un ejemplo, integrando una de las siguientes soluciones (Lukx '), que no funciona: http://jsfiddle.net/forgetcolor/rZSCg/1/. ¿Alguna idea de cómo hacer que espere a que la imagen se cargue antes de calcular el ancho?

Answer 1

Mediante la inserción de un nuevo DIV en el #box1 -Container, este DIV obtendrá el ancho disponible, y al leer su ancho se devuelve un valor que parece correcto.

HTML y CSS tanto permanecen sin cambios

JS convierte

var helperDiv = $('<div />'); 
$('#box1').append(helperDiv); 

$('#iw').text("inner width is: " + helperDiv.width()); 
helperDiv.remove();​​​​​​​​​​​​​​​​​​​​​​​​​​​ // because we dont need it anymore, do we? 

También se bifurcó su violín para ver lo que he hecho: http://jsfiddle.net/xc9xQ/2/

Así que para obtener este valor con una función:

function widthWithoutScrollbar(selector) { 
    var tempDiv = $("<div/>"); 
    $(selector).append(tempDiv); 
    var elemwidth = tempDiv.width(); 
    tempDiv.remove(); 
    return elemwidth; 
}; 

//Example 
console.log($('#page').width()); // 1280 
console.log(widthWithoutScrollbar('#page')); // 1265 

Answer 2

Usted puede hacer otra div copiando su div original, a continuación, obtener la anchura etc. Algo así como:

var saveDiv = $('<div />').html($('#box2').html()); 

saveDiv.innerWidth le dará 0

Answer 3

Si una solución en javascript normal está bien, puede usar la técnica descrita por David Walsh aquí: http://davidwalsh.name/detect-scrollbar-width

que se bifurcó su violín y puso en práctica: http://jsfiddle.net/jnaO/z9btp/

Pero, de nuevo, esto no está usando jQuery, JavaScript.

Answer 4

No estoy seguro exactamente de lo que está buscando, pero creo que es scrollWidth o clientWidth del div con id box1.

Ambas son propiedades de JavaScript y no es necesario que jQuery se recupere, pero se pueden tomar en jQuery con el siguiente $('#box1')[0]. Todo lo que hace es devolver el primer elemento DOM (y si está usando un ID, solo) desde el selector jQuery.

Si está buscando averiguar el ancho del contenido de box1, independientemente de la barra de desplazamiento, probablemente esté buscando $('#box1')[0].scrollWidth. Si está buscando el ancho disponible y se muestra dentro de box1, está buscando $('#box1')[0].clientWidth.

He bifurcado tu violín para que puedas ver ambos en acción. http://jsfiddle.net/arosen/xp9hD/