Как получить ширину экрана без (минус) полосы прокрутки?
У меня есть элемент и нужна его ширина без(!) вертикальная полоса прокрутки.
Firebug говорит мне, что ширина тела составляет 1280px.
любой из них отлично работает в Firefox:
console.log($('.element').outerWidth() );
console.log($('.element').outerWidth(true) );
$detour = $('.child-of-element').offsetParent();
console.log( $detour.innerWidth() );
они все вернутся 1263px, который является значением, которое я ищу.
однако все остальные браузеры дают мне 1280 пикселей.
есть ли кросс-браузер способ получить полноэкранную ширину без(!) вертикальная полоса прокрутки?
8 ответов:
.prop("clientWidth")и.prop("scrollWidth")var actualInnerWidth = $("body").prop("clientWidth"); // El. width minus scrollbar width var actualInnerWidth = $("body").prop("scrollWidth"); // El. width minus scrollbar widthin JavaScript:
var actualInnerWidth = document.body.clientWidth; // El. width minus scrollbar width var actualInnerWidth = document.body.scrollWidth; // El. width minus scrollbar widthP. S: обратите внимание, что использовать
scrollWidthнадежно ваш элемент не должен переполняться по горизонтали
вы также можете использовать
.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%;решил это за меня. Я пришел к этому решению после того, как попробовал ответить на этот вопрос и понял, что сама природа<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 ); });
Comments