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

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

90 голосов
/ 01 декабря 2011

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

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

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

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

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

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

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

Существует ли кросс-браузерный способ получить полноэкранную ширину без (!) Вертикальной полосы прокрутки?

Ответы [ 8 ]

149 голосов
/ 01 декабря 2011

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

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

var innerWidth = $('body').innerWidth(); // Width PX minus scrollbar
30 голосов
/ 14 августа 2014

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

var width = el.clientWidth;

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

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

Источник: MDN

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

var fullWidth = window.innerWidth;

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

Источник: MDN

13 голосов
/ 27 февраля 2013

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

Попробуйте это: 

$('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 голосов
/ 14 апреля 2015

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

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

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

0 голосов
/ 27 декабря 2016

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

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 );
});
0 голосов
/ 26 марта 2016

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

0 голосов
/ 05 июля 2015

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

...