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


102

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?


Avez-vous besoin des barres de défilement verticales? Ou pourriez-vous utiliser overflow: hidden puis calculer la largeur?
Filip

vous pouvez vous référer à ce site pour votre question stackoverflow.com/questions/8794338/…

vous pouvez essayerwidth: 100%;
www139

essayez-vous de faire de l'élément toute la largeur de l'écran sans les barres de défilement?
www139

Réponses:


161

.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 

2
Cela ne fonctionnera pas si, pour une raison quelconque, vous avez modifié la largeur de l'élément body.
Konstantin Pereiaslov

4
Il semble que cela ne fonctionne plus vraiment sur Chrome, la largeur signalée est en fait 20px plus grande que la fenêtre elle-même, j'ai essayé de nombreuses mesures de largeur jusqu'à présent, rien.
Sammaye

2
@Sammaye c'est parce que vous avez oublié (pourquoi?) De définir la marge: 0; à BODY ou utilisez un code de réinitialisation CSS commun. jsbin.com/homixuqi/2/edit . Encore une fois, le code fonctionne parfaitement bien .
Roko C. Buljan

2
@NamanGoel, c'est votre travail en tant que concepteur de sites Web pour éviter les contournements avec la largeur du corps. Ce n'est pas une tâche difficile. De plus, en ce qui concerne la hauteur, cela dépend si vos bodydébordements ou non. s'il déborde, le contraint.
Roko C. Buljan

2
@ RokoC.Buljan Je ne suis pas en désaccord avec vous ici. Bien sûr, aucun bon concepteur / développeur Web ne devrait jouer avec la largeur du corps et tout. Mon point était d'utiliser l'API la plus fiable disponible. Certains développeurs javascript peuvent créer des plug-ins, etc. et peuvent ne pas avoir le contrôle de la page entière.
Naman Goel le

36

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


Cela ne prend pas en compte s'il y a une barre de défilement
Jan

5
document.documentElement.clientWidthm'a le plus aidé, car cela fonctionne également pour la hauteur ( innerHeightpeut être plus petit si le corps ne remplit pas la page, etc.) et obtient la valeur sans la barre de défilement.
user4642212

1
document.documentElement.clientWidth est le vrai gagnant. document.body.clientWidth est correct sauf si vous avez défini une largeur minimale sur votre élément de corps et que le navigateur est actuellement plus petit que cette largeur minimale.
Codemonkey

12

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

10

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.


je devais me fier à cela aussi. les réponses ci-dessus n'ont pas fonctionné pour moi
valerio0999

J'ai sauvé mon temps! Merci beaucoup!
Xonshiz le

7

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.


0

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.



0

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 );
});
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.