Como obter largura de canvas sem (menos) barra de rolagem?

Eu tenho um elemento e preciso de largura sem (!) Barra de rolagem vertical.

O Firebug me diz que a largura do corpo é de 1280px.

Qualquer um deles funciona bem no Firefox:

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

Todos eles retornam 1263px , que é o valor que estou procurando.

No entanto, todos os outros navegadores me fornecem 1280px .

Existe uma maneira cross-browser para obter uma largura de canvas cheia sem (!) Barra de rolagem vertical?

.prop("clientWidth") e .prop("scrollWidth")

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

em JavaScript :

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

PS: Note que para usar scrollWidth forma confiável seu elemento não deve transbordar horizontalmente

demo jsBin


Você também pode usar .innerWidth() mas isso funcionará apenas no elemento body

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

Você pode usar o javascript de baunilha simplesmente escrevendo:

 var width = el.clientWidth; 

Você também pode usar isso para obter a largura do documento da seguinte maneira:

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

Fonte: MDN

Você também pode obter a largura da janela inteira, incluindo a barra de rolagem, da seguinte maneira:

 var fullWidth = window.innerWidth; 

No entanto, isso não é suportado por todos os navegadores, portanto, como alternativa, convém usar o docWidth como acima e adicionar a largura da barra de rolagem .

Fonte: MDN

Aqui estão alguns exemplos que assumem que $element é um 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 

Tente isto:

 $('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 

Você pode obter a largura da canvas com e sem a barra de rolagem usando esse código. Aqui, eu mudei o valor de estouro do body e obter a largura com e sem barra de rolagem.

O lugar mais seguro para obter a largura e a altura corretas sem as barras de rolagem é do elemento HTML. Tente isto:

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

O suporte do navegador é bastante decente, com o IE 9 e até mesmo suportando isso. Para o OLD IE, use um dos muitos fallbacks mencionados aqui.

Eu experimentei um problema semelhante e fazendo width:100%; resolvi isso para mim. Eu cheguei a esta solução depois de tentar uma resposta nesta pergunta e perceber que a própria natureza de um fará com que essas ferramentas de medição de javascript imprecisas sem usar alguma function complexa. Fazer 100% é uma maneira simples de cuidar disso em um iframe. Não sei sobre o seu problema, pois não tenho certeza de quais elementos HTML você está manipulando.

Nenhuma destas soluções funcionou para mim, no entanto, eu era capaz de consertá-lo, tomando a largura e subtraindo a largura da barra de rolagem . Não tenho certeza de como isso é compatível com o navegador cruzado.

Aqui é o que eu 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 ); });