Come ottenere la larghezza dello schermo senza la barra di scorrimento (meno)?


102

Ho un elemento e ho bisogno della sua larghezza senza (!) Barra di scorrimento verticale.

Firebug mi dice che la larghezza del corpo è 1280px.

Entrambi funzionano bene in Firefox:

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

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

Restituiscono tutti 1263 px , che è il valore che cerco.

Tuttavia tutti gli altri browser mi danno 1280px .

Esiste un modo cross browser per ottenere una larghezza a schermo intero senza (!) Barra di scorrimento verticale?


Hai bisogno delle barre di scorrimento verticali? O potresti usare overflow: hidden e quindi calcolare la larghezza?
Filip

è possibile fare riferimento a questo sito per la tua domanda stackoverflow.com/questions/8794338/...

potresti provarewidth: 100%;
www139

stai cercando di rendere l'elemento per l'intera larghezza dello schermo escluse le barre di scorrimento?
www139

Risposte:


161

.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

in JavaScript :

var actualInnerWidth = document.body.clientWidth;     // El. width minus scrollbar width
var actualInnerWidth = document.body.scrollWidth;     // El. width minus scrollbar width

PS: Nota che per utilizzare in scrollWidthmodo affidabile il tuo elemento non dovrebbe traboccare orizzontalmente

jsBin demo


Puoi anche usarlo .innerWidth()ma funzionerà solo bodysull'elemento

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

2
Questo non funzionerà se per qualche motivo hai cambiato la larghezza dell'elemento del corpo.
Konstantin Pereiaslov

4
Sembra che questo non funzioni più su Chrome, la larghezza riportata è in realtà 20px più grande della finestra stessa, ho provato numerose misurazioni della larghezza finora nulla.
Sammaye

2
@Sammaye è perché hai dimenticato (perché?) Di impostare il margine: 0; a BODY o utilizzare un comune codice di ripristino CSS. jsbin.com/homixuqi/2/edit . Quindi, ancora una volta, il codice funziona perfettamente .
Roko C. Buljan

2
@NamanGoel è il tuo lavoro come web designer evitare confusioni con la larghezza del corpo. Non è un compito difficile. Inoltre, per quanto riguarda l'altezza, dipende se il tuo bodytrabocco o meno. se trabocca, limitalo.
Roko C. Buljan

2
@ RokoC.Buljan Non sono in disaccordo con te qui. Ovviamente nessun buon web designer / sviluppatore dovrebbe pasticciare con la larghezza del corpo e altre cose. Il mio punto era sull'utilizzo dell'API più affidabile disponibile. Alcuni sviluppatori di javascript potrebbero creare plug-in e così via e potrebbero non avere il controllo dell'intera pagina.
Naman Goel

36

Puoi usare javascript vanilla semplicemente scrivendo:

var width = el.clientWidth;

Puoi anche usarlo per ottenere la larghezza del documento come segue:

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

Fonte: MDN

Puoi anche ottenere la larghezza della finestra intera, inclusa la barra di scorrimento, come segue:

var fullWidth = window.innerWidth;

Tuttavia questo non è supportato da tutti i browser, quindi come ripiego, potresti voler usare docWidthcome sopra e aggiungere la larghezza della barra di scorrimento .

Fonte: MDN


Questo non tiene conto se è presente una barra di scorrimento
gennaio

5
document.documentElement.clientWidthmi ha aiutato di più, perché funziona anche per l'altezza ( innerHeightpuò essere più piccolo se il corpo non riempie la pagina, ecc.) e ottiene il valore senza la barra di scorrimento.
user4642212

1
document.documentElement.clientWidth è il vero vincitore. document.body.clientWidth va bene a meno che tu non abbia una larghezza minima impostata sull'elemento del tuo corpo e il browser sia attualmente più piccolo di quella larghezza minima.
Codemonkey

12

Ecco alcuni esempi che presumono $elementsia un 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

10

Prova questo :

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

È possibile ottenere la larghezza dello schermo con e senza barra di scorrimento utilizzando questo codice. Qui, ho modificato il valore di overflow di bodye ho ottenuto la larghezza con e senza barra di scorrimento.


ho dovuto fare affidamento anche su questo. le risposte sopra non hanno funzionato per me
valerio0999

Mi ha fatto risparmiare tempo! Grazie mille!
Xonshiz

7

Il posto più sicuro per ottenere la larghezza e l'altezza corrette senza le barre di scorrimento è dall'elemento HTML. Prova questo:

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

Il supporto del browser è abbastanza decente, con IE 9 e versioni successive che lo supportano. Per OLD IE, usa uno dei tanti fallback menzionati qui.


0

Ho riscontrato un problema simile e l' width:100%;ho risolto per me. Sono arrivato a questa soluzione dopo aver provato una risposta a questa domanda e aver realizzato che la natura stessa di un <iframe>renderà questi strumenti di misurazione javascript inaccurati senza utilizzare alcune funzioni complesse. Fare il 100% è un modo semplice per occuparsene in un iframe. Non so quale sia il tuo problema poiché non sono sicuro di quali elementi HTML stai manipolando.



0

Ecco cosa 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 );
});
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.