Como obter a largura da tela sem (menos) barra de rolagem?

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

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

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 1263 px , que é o valor que procuro.

No entanto, todos os outros navegadores me dão 1280 px .

Existe uma maneira de cross-browser para obter uma largura de tela inteira 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: Observe que, para usar de scrollWidthforma confiável, seu elemento não deve transbordar horizontalmente}

jsBin demo

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

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

Você pode usar o vanilla javascript 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 é compatível com todos os navegadores, portanto, como alternativa, você pode usar docWidthcomo descrito acima e adicionar a largura da barra de rolagem .

Fonte: MDN

Aqui estão alguns exemplos que presumem $elementser um 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

Experimente 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 tela com e sem a barra de rolagem usando este código. Aqui, alterei o valor de estouro de bodye obtive a largura com e sem barra de rolagem.

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

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

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

Eu experimentei um problema semelhante e isso width:100%;resolveu para mim. Cheguei a essa solução depois de tentar uma resposta a essa pergunta e perceber que a própria natureza de um <iframe>tornará essas ferramentas de medição javascript imprecisas sem usar alguma função 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 dessas soluções funcionou para mim, no entanto, fui capaz de consertar pegando a largura e subtraindo a largura da barra de rolagem . Não tenho certeza de como isso é compatível com vários navegadores.

Aqui está 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 );
});