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

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

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

Любая из этих функций отлично работает в Firefox:

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

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

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

Однако все остальные браузеры дают мне 1280px.

Есть ли способ перекрестного браузера, чтобы получить полноэкранную ширину без (!) вертикальной полосы прокрутки?

Ответ 1

`.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

_{P.S: Обратите внимание, что для надежного использования scrollWidth ваш элемент не должен переполняться горизонтально}

jsBin demo

Вы также можете использовать .innerWidth(), но этот будет работать только с элементом body

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

Ответ 2

Вы можете использовать javascript vanilla, просто написав:

var width = el.clientWidth;

Вы также можете использовать это, чтобы получить ширину документа следующим образом:

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

Источник: MDN

Вы также можете получить ширину полного окна, включая полосу прокрутки, следующим образом:

var fullWidth = window.innerWidth;

Однако это не поддерживается всеми браузерами, поэтому в качестве резервной копии вы можете использовать docWidth, как указано выше, и добавить на ширину полосы прокрутки.

Источник: MDN

Ответ 3

Вот несколько примеров, которые предполагают, что $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

Ответ 4

Попробуйте следующее:

$('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 и получил ширину с и без полосы прокрутки.

Ответ 5

Самое безопасное место для получения правильной ширины и высоты без полос прокрутки - это элемент HTML. Попробуйте следующее:

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

Поддержка браузера довольно приличная, с IE 9 и поддержка этого. Для OLD IE используйте один из множества резервных копий, упомянутых здесь.

Ответ 6

У меня возникла аналогичная проблема, и я решил width:100%; решить ее для меня. Я пришел к этому решению после того, как попытался ответить на этот вопрос и понял, что сама природа <iframe> сделает эти инструменты измерения javascript неточными, не используя какую-либо сложную функцию. Выполнение 100% - это простой способ позаботиться об этом в iframe. Я не знаю о вашей проблеме, так как я не уверен, какие элементы HTML вы манипулируете.

Ответ 7

Ни одно из этих решений не работало для меня, однако я смог исправить это, взяв ширину и вычитая ширину полосы прокрутки . Я не уверен, насколько это совместимо с кросс-браузером.

Ответ 8

Вот что я использую

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