¿Cómo obtener el ancho de la pantalla sin la barra de desplazamiento (menos)?

Tengo un elemento y necesito su ancho sin (!) Barra de desplazamiento vertical.

Firebug me dice que el ancho del cuerpo es de 1280px.

Cualquiera de estos funciona bien en Firefox:

console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );

$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );

Todos devuelven 1263px , que es el valor que estoy buscando.

Sin embargo, todos los demás navegadores me dan 1280px .

¿Existe una forma de varios navegadores para obtener un ancho de pantalla completa sin (!) Barra de desplazamiento vertical?

.prop("clientWidth") y .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

en JavaScript :

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

_{PD:scrollWidth tenga en cuenta que para usar de manera confiable su elemento no debe desbordarse horizontalmente}

jsBin demo

También puede usar, .innerWidth()pero esto solo funcionará en el bodyelemento

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar 

Puede usar javascript vanilla simplemente escribiendo:

var width = el.clientWidth;

También puede usar esto para obtener el ancho del documento de la siguiente manera:

var docWidth = document.documentElement.clientWidth || document.body.clientWidth;

Fuente: MDN

También puede obtener el ancho de la ventana completa, incluida la barra de desplazamiento, de la siguiente manera:

var fullWidth = window.innerWidth;

Sin embargo, esto no es compatible con todos los navegadores, por lo que, como alternativa, es posible que desee usar docWidthcomo se indicó anteriormente y agregar el ancho de la barra de desplazamiento .

Fuente: MDN

Aquí hay algunos ejemplos que asumen que $elementes un jQueryelemento:

// Element width including overflow (scrollbar)
$element[0].offsetWidth; // 1280 in your case

// Element width excluding overflow (scrollbar)
$element[0].clientWidth; // 1280 - scrollbarWidth

// Scrollbar width
$element[0].offsetWidth - $element[0].clientWidth; // 0 if no scrollbar

Prueba esto :

$('body, html').css('overflow', 'hidden');
var screenWidth1 = $(window).width();
$('body, html').css('overflow', 'visible');
var screenWidth2 = $(window).width();
alert(screenWidth1); // Gives the screenwith without scrollbar
alert(screenWidth2); // Gives the screenwith including scrollbar

Puede obtener el ancho de la pantalla con y sin barra de desplazamiento usando este código. Aquí, he cambiado el valor de desbordamiento de bodyy obtengo el ancho con y sin barra de desplazamiento.

El lugar más seguro para obtener el ancho y alto correctos sin las barras de desplazamiento es desde el elemento HTML. Prueba esto:

var width = document.documentElement.clientWidth
var height = document.documentElement.clientHeight

El soporte del navegador es bastante decente, con IE 9 y versiones posteriores que lo admiten. Para OLD IE, use una de las muchas alternativas mencionadas aquí.

Experimenté un problema similar y al hacerlo width:100%;me lo resolvió. Llegué a esta solución después de intentar una respuesta en esta pregunta y darme cuenta de que la naturaleza misma de un <iframe>hará que estas herramientas de medición de JavaScript sean inexactas sin usar alguna función compleja. Hacerlo al 100% es una forma sencilla de cuidarlo en un iframe. No sé sobre su problema, ya que no estoy seguro de qué elementos HTML está manipulando.

Ninguna de estas soluciones funcionó para mí, sin embargo, pude solucionarlo tomando el ancho y restando el ancho de la barra de desplazamiento . No estoy seguro de si es compatible con varios navegadores.

Esto es lo que uso

function windowSizes(){
    var e = window,
        a = 'inner';
    if (!('innerWidth' in window)) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return {
        width: e[a + 'Width'],
        height: e[a + 'Height']
    };  
}

$(window).on('resize', function () {
    console.log( windowSizes().width,windowSizes().height );
});