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


104

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

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

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

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

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

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

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

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


Вам нужны вертикальные полосы прокрутки? Или вы могли бы использовать overflow: hidden, а затем вычислить ширину?
Филип

вы можете обратиться к этому сайту для получения ответа на свой вопрос stackoverflow.com/questions/8794338/…

Вы могли бы попробоватьwidth: 100%;
www139 05

вы пытаетесь сделать элемент на всю ширину экрана, не включая полосы прокрутки?
www139 05

Ответы:


162

.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 

2
Это не сработает, если по какой-то причине вы изменили ширину элемента body.
Константин Переяслов

4
Кажется, это больше не работает в Chrome, заявленная ширина на самом деле на 20 пикселей больше, чем само окно, я пробовал многочисленные измерения ширины пока ничего.
Sammaye

2
@Sammaye, потому что вы забыли (почему?) Установить маржу: 0; в BODY или используйте обычный код сброса CSS. jsbin.com/homixuqi/2/edit . Итак, опять же, код работает отлично .
Роко С. Бульян

2
@NamanGoel, ваша работа как веб-дизайнера - предотвращать путаницу с шириной тела. Это не сложная задача. Кроме того, что касается высоты, это зависит от того, bodyпереполнены ли ваши переполнения или нет. если он переполняется, то ограничивайте его.
Роко Бульян

2
@ RokoC.Buljan Я с вами не возражаю. Конечно, ни один хороший веб-дизайнер / разработчик не должен возиться с шириной тела и прочим. Я хотел использовать самый надежный доступный API. Некоторые разработчики javascript могут создавать плагины и т. Д. И не могут контролировать всю страницу.
Наман Гоэль

37

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

var width = el.clientWidth;

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

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

Источник: MDN

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

var fullWidth = window.innerWidth;

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

Источник: MDN


Это не учитывает наличие полосы прокрутки
янв.

6
document.documentElement.clientWidthпомогло мне больше всего, потому что он работает и для высоты ( innerHeightможет быть меньше, если тело не заполняет страницу и т. д.) и получает значение без полосы прокрутки.
user4642212

1
document.documentElement.clientWidth - настоящий победитель. document.body.clientWidth в порядке, если у вас не установлена ​​минимальная ширина для вашего элемента body, и браузер в настоящее время меньше этой минимальной ширины.
Codemonkey

12

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

10

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

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


мне тоже пришлось на это положиться. ответы выше не сработали для меня
valerio0999 01

Сэкономил мое время! Благодаря тонну!
Xonshiz

7

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

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

Поддержка браузеров довольно приличная, с поддержкой IE 9 и выше. Для СТАРОГО IE используйте один из многих резервных вариантов, упомянутых здесь.


0

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



0

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

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 );
});
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.