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

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?

.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 

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

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

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.

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.

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.

Nessuna di queste soluzioni ha funzionato per me, tuttavia sono stato in grado di risolverlo prendendo la larghezza e sottraendo la larghezza della barra di scorrimento . Non sono sicuro di quanto sia compatibile con cross-browser.

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