Bagaimana cara mendapatkan lebar layar tanpa scrollbar (minus)?

Saya memiliki elemen dan membutuhkan lebarnya tanpa scrollbar vertikal (!).

Firebug memberi tahu saya lebar tubuh adalah 1280px.

Salah satu dari ini berfungsi dengan baik di Firefox:

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

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

Mereka semua mengembalikan 1263px , yang merupakan nilai yang saya cari.

Namun semua browser lain memberi saya 1280px .

Apakah ada cara lintas browser untuk mendapatkan lebar layar penuh tanpa scrollbar vertikal (!)?

.prop("clientWidth") dan .prop("scrollWidth")

var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width
var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar width

dalam JavaScript :

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

_{PS: Perhatikan bahwa untuk menggunakan dengan scrollWidthandal elemen Anda tidak boleh meluap secara horizontal}

jsBin demo

Anda juga bisa menggunakan .innerWidth()tapi ini hanya akan bekerja pada bodyelemen

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

Anda dapat menggunakan vanilla javascript hanya dengan menulis:

var width = el.clientWidth;

Anda juga bisa menggunakan ini untuk mendapatkan lebar dokumen sebagai berikut:

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

Sumber: MDN

Anda juga bisa mendapatkan lebar jendela penuh, termasuk scrollbar, sebagai berikut:

var fullWidth = window.innerWidth;

Namun ini tidak didukung oleh semua browser, jadi sebagai gantinya, Anda mungkin ingin menggunakan docWidthseperti di atas, dan menambahkan lebar scrollbar .

Sumber: MDN

Berikut beberapa contoh yang dianggap $elementsebagai jQueryelemen:

// 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

Coba ini :

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

Anda bisa mendapatkan lebar layar dengan dan tanpa scroll bar dengan menggunakan kode ini. Di sini, saya telah mengubah nilai overflow dari bodydan mendapatkan lebarnya dengan dan tanpa scrollbar.

Tempat teraman untuk mendapatkan lebar dan tinggi yang benar tanpa scrollbar adalah dari elemen HTML. Coba ini:

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

Dukungan browser cukup baik, dengan IE 9 dan lebih tinggi mendukung ini. Untuk IE LAMA, gunakan salah satu dari banyak fallback yang disebutkan di sini.

Saya mengalami masalah serupa dan melakukan width:100%;pemecahannya untuk saya. Saya datang ke solusi ini setelah mencoba jawaban dalam pertanyaan ini dan menyadari bahwa sifat an <iframe>akan membuat alat pengukuran javascript ini tidak akurat tanpa menggunakan beberapa fungsi yang kompleks. Melakukan 100% adalah cara sederhana untuk menjaganya dalam iframe. Saya tidak tahu tentang masalah Anda karena saya tidak yakin elemen HTML apa yang Anda manipulasi.

Tak satu pun dari solusi ini berhasil untuk saya, namun saya dapat memperbaikinya dengan mengambil lebar dan mengurangi lebar bilah gulir . Saya tidak yakin seberapa kompatibel lintas-browser ini.

Inilah yang saya gunakan

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