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

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

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 использования scrollWidth ваш элемент не должен переполняться горизонтально

jsBin demo


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

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

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

 var width = el.clientWidth; 

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

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

Источник: MDN

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

 var fullWidth = window.innerWidth; 

Однако это не поддерживается всеми браузерами, поэтому, как и резервное docWidth , вы можете использовать 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 и поддержка этого. Для OLD IE используйте один из многих недостатков, упомянутых здесь.

Я столкнулся с аналогичной проблемой и делаю width:100%; решил это для меня. Я пришел к этому решению, попробовав ответ в этом вопросе и осознав, что сама природа сделает эти инструменты измерения 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 ); }); 
  • Как получить ширину строки в Libgdx?
  • Ширина UIWebView iPhone не подходит после операции масштабирования + изменение UIInterfaceOrientation
  • Свойство CSS \ 9 в ширине
  • Ширина столбца CView ListView Auto
  • Ширина диалогового windows Android
  • jQuery - Получить ширину элемента, если он не отображается (Дисплей: Нет)
  • Давайте будем гением компьютера.