Bagaimana cara mendapatkan lebar layar tanpa scrollbar (minus)?


102

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 (!)?


Apakah Anda memerlukan scrollbar vertikal? Atau dapatkah Anda menggunakan overflow: hidden lalu menghitung lebarnya?
Filip

Anda dapat merujuk ke situs ini untuk pertanyaan Anda stackoverflow.com/questions/8794338/…

Anda dapat mencobawidth: 100%;
www139

apakah Anda mencoba membuat elemen menjadi seluruh lebar layar tidak termasuk bilah gulir?
www139

Jawaban:


161

.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 

2
Ini tidak akan berfungsi jika karena alasan tertentu Anda mengubah lebar elemen tubuh.
Konstantin Pereiaslov

4
Sepertinya ini tidak benar-benar berfungsi di Chrome lagi, lebar yang dilaporkan sebenarnya 20px lebih besar dari jendela itu sendiri, saya telah mencoba banyak pengukuran lebar sejauh ini tidak ada.
Sammaye

2
@Sammaye yang menyebabkan Anda lupa (mengapa?) Untuk mengatur margin: 0; ke BODY atau gunakan kode reset CSS umum. jsbin.com/homixuqi/2/edit . Jadi sekali lagi, kodenya berfungsi dengan baik .
Roko C. Buljan

2
@NamanGoel adalah tugas Anda sebagai desainer web untuk mencegah kekacauan dengan lebar tubuh. Ini bukanlah tugas yang sulit. Juga, mengenai ketinggiannya tergantung apakah Anda bodymeluap atau tidak. jika meluap daripada membatasinya.
Roko C. Buljan

2
@ RokoC.Buljan Saya tidak setuju dengan Anda di sini. Tentu saja tidak ada perancang / pengembang web yang baik yang harus mengutak-atik lebar bodi dan sebagainya. Maksud saya adalah tentang menggunakan API paling andal yang tersedia. Beberapa pengembang javascript mungkin membuat pengaya dll dan mungkin tidak memiliki kendali atas seluruh laman.
Naman Goel

36

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


Ini tidak memperhitungkan jika ada scrollbar
Jan

5
document.documentElement.clientWidthsangat membantu saya, karena berfungsi untuk ketinggian juga ( innerHeightbisa lebih kecil jika badan tidak memenuhi halaman, dll.) dan mendapatkan nilainya tanpa scrollbar.
user4642212

1
document.documentElement.clientWidth adalah pemenang sebenarnya. document.body.clientWidth tidak apa-apa kecuali Anda memiliki set lebar-min pada elemen tubuh Anda dan browser saat ini lebih kecil dari lebar minimum itu.
Codemonkey

12

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

10

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.


saya harus mengandalkan ini juga. jawaban di atas tidak berhasil untuk saya
valerio0999

Menghemat waktu saya! Terima kasih banyak!
Xonshiz

7

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.


0

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.


0

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.


0

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 );
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.