Comment obtenir la largeur de l'écran sans (moins) barre de défilement?

J'ai un élément et j'ai besoin de sa largeur sans (!) Barre de défilement verticale.

Firebug me dit que la largeur du corps est de 1280px.

L'un ou l'autre fonctionne correctement dans Firefox:

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

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

Ils renvoient tous 1263px , ce qui est la valeur que je recherche.

Cependant, tous les autres navigateurs me donnent 1280px .

Existe-t-il un moyen multi-navigateurs pour obtenir une largeur plein écran sans (!) Barre de défilement verticale?

.prop("clientWidth") et .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

_{PS: notez que pour utiliser de scrollWidthmanière fiable votre élément ne doit pas déborder horizontalement}

Démo jsBin

Vous pouvez également utiliser .innerWidth()mais cela ne fonctionnera que sur l' bodyélément

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

Vous pouvez utiliser du javascript vanille en écrivant simplement:

var width = el.clientWidth;

Vous pouvez également l'utiliser pour obtenir la largeur du document comme suit:

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

Source: MDN

Vous pouvez également obtenir la largeur de la fenêtre complète, y compris la barre de défilement, comme suit:

var fullWidth = window.innerWidth;

Cependant, cela n'est pas pris en charge par tous les navigateurs, donc comme solution de secours, vous pouvez utiliser docWidthcomme ci-dessus et ajouter la largeur de la barre de défilement .

Source: MDN

Voici quelques exemples qui supposent qu'il $elements'agit d'un jQueryélément:

// 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

Essaye ça :

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

Vous pouvez obtenir la largeur de l'écran avec et sans barre de défilement en utilisant ce code. Ici, j'ai changé la valeur de débordement de bodyet obtenir la largeur avec et sans barre de défilement.

L'élément HTML est l'endroit le plus sûr pour obtenir la largeur et la hauteur correctes sans les barres de défilement. Essaye ça:

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

La prise en charge du navigateur est assez correcte, avec IE 9 et les versions ultérieures le prenant en charge. Pour OLD IE, utilisez l'une des nombreuses solutions de secours mentionnées ici.

J'ai rencontré un problème similaire et je l'ai width:100%;résolu pour moi. Je suis venu à cette solution après avoir essayé une réponse à cette question et réalisé que la nature même d'un <iframe>rendrait ces outils de mesure javascript inexacts sans utiliser une fonction complexe. Faire 100% est un moyen simple de s'en occuper dans une iframe. Je ne connais pas votre problème car je ne suis pas sûr des éléments HTML que vous manipulez.

Aucune de ces solutions n'a fonctionné pour moi, mais j'ai pu le corriger en prenant la largeur et en soustrayant la largeur de la barre de défilement . Je ne sais pas à quel point c'est compatible avec tous les navigateurs.

Voici ce que j'utilise

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