web-dev-qa-db-fra.com

Comment obtenir une largeur d'é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 de ces fonctionne bien dans Firefox:

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

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

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

Cependant, tous les autres navigateurs me donnent 1280px. 

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

jquerycross-browserwidth
83
frequent

.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

P.S: Notez que pour utiliser scrollWidth de manière fiable, votre élément ne doit pas déborder horizontalement

Démo de jsBin

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

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
143
Roko C. Buljan

Vous pouvez utiliser javascript pour Vanilla 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 supporté par tous les navigateurs. Par conséquent, vous voudrez peut-être utiliser docWidth comme ci-dessus et ajouter le scrollbar width .

Source: MDN

29
Joshua Bambrick

Voici quelques exemples qui supposent que $element est un élément 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
13
Konstantin Dinev

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 à l'aide de ce code ..__ Ici, j'ai modifié la valeur de dépassement de body et obtenir la largeur avec et sans barre de défilement.

8
HQtunes.com

L'élément HTML est l'élément 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

Le support du navigateur est plutôt correct, avec IE 9 et plus supportant cela. Pour OLD IE, utilisez l’une des nombreuses solutions de rechange mentionnées ici.

4
Naman Goel

J'ai rencontré un problème similaire et le faire avec width:100%; l'a 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 un iframe. Je ne connais pas votre problème car je ne suis pas sûr des éléments HTML que vous manipulez.

0
www139

Aucune de ces solutions ne fonctionnait pour moi, cependant j'ai pu résoudre le problème en prenant la largeur et en soustrayant la largeur de la barre de défilement . Je ne sais pas dans quelle mesure cela est compatible avec tous les navigateurs.

0
homebrand

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