È possibile calcolare Viewport Width (vw) senza barra di scorrimento?

Question

Come menzionato nel titolo, è possibile calcolare lo vw senza le barre di scorrimento solo in css?

Ad esempio, il mio schermo ha una larghezza di 1920px. vw restituisce 1920px, ottimo. Ma la mia larghezza effettiva del corpo è solo qualcosa come 1903px.

C'è un modo per recuperare il valore 1903px solo con css (non solo per i figli diretti di body) o devo assolutamente avere JavaScript per questo?

Answer 1

In base a the specs, le unità di lunghezza relativa del viewport non tengono conto delle barre di scorrimento (e in effetti, si assume che non esistano).

Quindi qualunque sia il comportamento previsto, non è possibile tenere conto delle barre di scorrimento quando si usano queste unità.

Answer 2

I browser Webkit escludono le barre di scorrimento, altri li includono nella larghezza restituita. Questo può naturalmente portare a problemi: ad esempio se hai generato dinamicamente contenuti con ajax che aggiungono altezza in modo dinamico, Safari potrebbe passare da un layout a un altro durante la visualizzazione delle pagine ... Ok, non succede spesso, ma è qualcosa di cui essere a conoscenza. Sul cellulare, meno problemi, perché le barre di scorrimento non sono generalmente mostrate.

che è detto, se il problema è calcolare exacly la larghezza finestra senza barre di scorrimento in tutti i browser, per quanto ne so, un buon metodo è questo:

width = $('body').innerWidth(); 

aver impostato in precedenza:

body { 
    margin:0; 
    } 

Answer 3

Un modo per farlo è con calc. Per quanto ne so, il 100% è la larghezza tra cui le barre di scorrimento. Quindi, se lo fai:

body { 
    width: calc(100vw - (100vw - 100%)); 
} 

Si ottiene il 100vw meno la larghezza della barra di scorrimento.

Si può fare questo con l'altezza e, se si vuole una piazza che è il 50% della finestra per esempio (meno 50% della larghezza scollbar)

.box { 
    width: calc(50vw - ((100vw - 100%)/2)) 
    height: 0 
    padding-bottom: calc(50vw - ((100vw - 100%)/2)) 
} 

Answer 4

L'unità vw non prende il overflow-y barra di scorrimento nel conto quando overflow-y è impostato su auto.

Cambiarlo in overflow-y: scroll; e l'unità vw sarà il viewport senza la barra di scorrimento.

Unico svantaggio da prendere in considerazione. Se il contenuto si adatta allo schermo, la barra di scorrimento viene mostrata comunque. La soluzione possibile è quella di passare da auto a scroll in javascript.