Як отримати ширину екрана без (мінус) смуги прокрутки?

У мене є елемент і потрібна його ширина без (!) Вертикальної смуги прокрутки.

Firebug повідомляє мені, що ширина тіла - 1280 пікселів.

Будь-який із цих функцій відмінно працює у Firefox:

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

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

Всі вони повертають 1263px , що є значенням, яке я шукаю.

Однак усі інші браузери дають мені 1280 пікселів .

Чи існує спосіб перехресного браузера отримати ширину повноекранного екрана без (!) Вертикальної смуги прокрутки?

.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 

Ви можете використовувати ванільний 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 і вище підтримують це. Для СТАРОГО IE використовуйте один із багатьох згаданих тут резервних копій.

Я відчув подібну проблему і width:100%;вирішив її для мене. Я прийшов до цього рішення, спробувавши відповідь на це запитання і зрозумівши, що сама природа повідомлення <iframe>зробить ці інструменти вимірювання JavaScript неточними без використання якоїсь складної функції. Зробити 100% - це простий спосіб подбати про це в кадрі. Я не знаю про вашу проблему, оскільки я не впевнений, якими елементами 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 );
});