Comment obtenir une largeur d’écran sans 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’une 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 retournent tous 1263px , ce qui est la valeur que je recherche.

Cependant, tous les autres navigateurs me donnent 1280px .

Existe-t-il une méthode multi-navigateur 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 scrollWidth maniè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’élément body

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

Vous pouvez utiliser le javascript 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 pris en charge par tous les navigateurs. Par conséquent, en tant que docWidth secours, vous pouvez utiliser docWidth comme ci-dessus et append la largeur de la barre de défilement .

Source: MDN

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 

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 modifié la valeur de débordement du body et obtenu la largeur avec et sans barre de défilement.

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

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

La prise en charge du navigateur est assez décente, avec IE 9 et supérieur. Pour OLD IE, utilisez l’une des nombreuses solutions de secours mentionnées ici.

J’ai rencontré un problème similaire et je fais de la 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 rendra 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 sais pas à propos de votre problème, car je ne suis pas sûr de savoir quels éléments HTML vous manipulez.

Aucune de ces solutions n’a fonctionné pour moi, mais j’ai été en mesure de la corriger en prenant la largeur et en soustrayant la largeur de la barre de défilement . Je ne sais pas comment cela 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 ); });