Как получить ширину экрана без (минусовой) полосы прокрутки?

У меня есть элемент, и мне нужна его ширина без (!) Вертикальной полосы прокрутки.

Firebug сообщает, что ширина тела составляет 1280 пикселей.

Любой из них отлично работает в Firefox:

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

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

Все они возвращают 1263 пикселей , и это значение, которое я ищу.

Однако все остальные браузеры дают мне 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%;решил ее для себя. Я пришел к этому решению после того, как попробовал ответить на этот вопрос и понял, что сама природа an <iframe>сделает эти инструменты измерения javascript неточными без использования какой-либо сложной функции. Выполнение 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 );
});