จะรับความกว้างของหน้าจอโดยไม่มีแถบเลื่อน (ลบ) ได้อย่างไร?

ฉันมีองค์ประกอบและต้องการความกว้างโดยไม่มีแถบเลื่อนแนวตั้ง (!)

Firebug บอกความกว้างของร่างกายคือ 1280px

สิ่งเหล่านี้ทำงานได้ดีใน Firefox:

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

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

ทั้งหมดส่งคืน1263pxซึ่งเป็นค่าที่ฉันกำลังมองหา

อย่างไรก็ตามเบราว์เซอร์อื่น ๆ ทั้งหมดให้ฉัน1280px

มีวิธีการข้ามเบราว์เซอร์เพื่อรับความกว้างเต็มหน้าจอโดยไม่มีแถบเลื่อนแนวตั้ง (!) หรือไม่?

.prop("clientWidth") และ .prop("scrollWidth")

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

ในJavaScript :

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

_{PS:โปรดทราบว่าการใช้scrollWidthองค์ประกอบของคุณอย่างน่าเชื่อถือไม่ควรล้นในแนวนอน}

jsBin สาธิต

คุณยังสามารถใช้ได้.innerWidth()แต่จะใช้ได้กับbodyองค์ประกอบเท่านั้น

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

คุณสามารถใช้ vanilla javascript ได้โดยเขียน:

var width = el.clientWidth;

คุณยังสามารถใช้สิ่งนี้เพื่อรับความกว้างของเอกสารได้ดังนี้:

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

ที่มา: MDN

คุณยังสามารถรับความกว้างของหน้าต่างแบบเต็มรวมทั้งแถบเลื่อนได้ดังนี้:

var fullWidth = window.innerWidth;

อย่างไรก็ตามเรื่องนี้ไม่ได้รับการสนับสนุนจากเบราว์เซอร์เพื่อให้เป็นทางเลือกที่คุณอาจต้องการที่จะใช้docWidthกับข้างต้นและเพิ่มในความกว้างของแถบเลื่อน

ที่มา: MDN

นี่คือตัวอย่างบางส่วนที่ถือว่า$elementเป็นjQueryองค์ประกอบ:

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

ลองสิ่งนี้:

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

คุณสามารถรับความกว้างของหน้าจอโดยมีและไม่มีแถบเลื่อนโดยใช้รหัสนี้ ที่นี่ฉันได้เปลี่ยนค่าล้นของbodyและรับความกว้างที่มีและไม่มีแถบเลื่อน

สถานที่ที่ปลอดภัยที่สุดในการรับความกว้างและความสูงที่ถูกต้องโดยไม่มีแถบเลื่อนมาจากองค์ประกอบ HTML ลองสิ่งนี้:

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

การสนับสนุนเบราว์เซอร์ค่อนข้างดีโดยมี IE 9 ขึ้นไปรองรับสิ่งนี้ สำหรับ OLD IE ให้ใช้หนึ่งในทางเลือกอื่น ๆ ที่กล่าวถึงที่นี่

ฉันประสบปัญหาที่คล้ายกันและกำลังwidth:100%;แก้ไขให้ฉัน ฉันมาถึงวิธีแก้ปัญหานี้หลังจากลองตอบคำถามนี้และตระหนักว่าลักษณะของการ<iframe>จะทำให้เครื่องมือวัดจาวาสคริปต์เหล่านี้ไม่แม่นยำโดยไม่ต้องใช้ฟังก์ชันที่ซับซ้อน การทำ 100% เป็นวิธีง่ายๆในการดูแลใน iframe ฉันไม่รู้เกี่ยวกับปัญหาของคุณเนื่องจากไม่แน่ใจว่าคุณกำลังจัดการองค์ประกอบ HTML ใดอยู่

ไม่มีการแก้ปัญหาเหล่านี้ทำงานให้ฉัน แต่ฉันก็สามารถที่จะแก้ไขได้โดยการใช้ความกว้างและลบความกว้างของแถบเลื่อน ฉันไม่แน่ใจว่ามันเข้ากันได้กับข้ามเบราว์เซอร์แค่ไหน

นี่คือสิ่งที่ฉันใช้

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