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