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

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

Firebug me dice que el ancho del cuerpo es 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 .

¿Hay una forma de navegador cruzado 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 cuenta que para usar scrollWidth manera confiable su elemento no debe desbordarse horizontalmente

jsBin demo


También podría usar .innerWidth() pero esto funcionará solo en el elemento del body

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

Puede usar vainilla javascript 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, puede usar docWidth como se docWidth anteriormente y agregar el ancho de la barra de desplazamiento .

Fuente: MDN

Aquí hay algunos ejemplos que suponen que $element es un elemento jQuery :

 // 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 utilizando este código. Aquí, he cambiado el valor de desbordamiento del body y obtengo el ancho con y sin barra de desplazamiento.

El lugar más seguro para obtener el ancho y la altura 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 hasta apoyando esto. Para OLD IE, usa uno de los muchos retrocesos mencionados aquí.

Experimenté un problema similar y hago width:100%; lo resolvió para mí. Llegué a esta solución después de probar una respuesta en esta pregunta y de darme cuenta de que la naturaleza misma de un hará que estas herramientas de medición de JavaScript sean inexactas sin usar alguna función compleja. Hacer 100% es una manera simple de cuidarlo en un iframe. No sé cuál es tu problema, ya que no estoy seguro de qué elementos HTML estás 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 qué tan compatible es esto.

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 ); });