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

css viewport-units

29396 просмотра

8 ответа

635 Репутация автора

Как уже упоминалось в заголовке, можно ли рассчитать vwбез полос прокрутки только в css?

Например, мой экран имеет ширину 1920px. vwвозвращается 1920px, отлично. Но моя фактическая ширина тела только что-то вроде 1903px.

Есть ли способ для меня получить 1903pxзначение только с помощью css (не только для непосредственных потомков body), или мне абсолютно необходим JavaScript для этого?

Автор: Marten Zander Источник Размещён: 09.11.2015 10:00

Ответы (8)


5 плюса

124171 Репутация автора

Согласно спецификациям , единицы измерения относительной длины области просмотра не учитывают полосы прокрутки (и фактически предполагают, что они не существуют).

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

Автор: Madara Uchiha Размещён: 09.11.2015 10:06

2 плюса

1255 Репутация автора

Браузеры Webkit исключают полосы прокрутки, другие включают их в возвращаемую ширину. Это, конечно, может привести к проблемам: например, если у вас есть динамически сгенерированный контент с ajax, который динамически увеличивает высоту, Safari может переключаться с макета на другой во время визуализации страницы ... Хорошо, это случается не часто, но это что-то знать о. На мобильных устройствах проблем меньше, поскольку полосы прокрутки обычно не отображаются.

Тем не менее, если ваша задача - точно рассчитать ширину области просмотра без полос прокрутки во всех браузерах, насколько я знаю, хороший метод заключается в следующем:

width = $('body').innerWidth();

предварительно установив:

body {
    margin:0;
}
Автор: holden Размещён: 09.11.2015 11:28

72 плюса

901 Репутация автора

Один из способов сделать это с помощью Calc. Насколько я знаю, 100% это ширина, включая полосы прокрутки. Так что если вы делаете:

body {
  width: calc(100vw - (100vw - 100%));
}

Вы получите 100vw минус ширина полосы прокрутки.

Вы также можете сделать это с высотой, если вы хотите, чтобы квадрат составлял, например, 50% области просмотра (минус 50% ширины полосы прокрутки)

.box {
  width: calc(50vw - ((100vw - 100%)/2))
  height: 0
  padding-bottom: calc(50vw - ((100vw - 100%)/2))
}  
Автор: Mattias Ottosson Размещён: 19.01.2016 07:02

0 плюса

1142 Репутация автора

vwУстройство не принимает overflow-yскроллбар во внимание при overflow-yустановлено значение auto.

Измените это на, overflow-y: scroll;и vwустройство будет окном просмотра без полосы прокрутки.

Единственный недостаток, чтобы принять во внимание. Если содержимое помещается на экран, полоса прокрутки отображается в любом случае. Возможное решение для перехода от autoк scrollв JavaScript.

Автор: Ilario Engler Размещён: 07.02.2018 10:26

0 плюса

3474 Репутация автора

Единственный способ, с помощью которого я нашел, что он работает, не путая ваш код с «calc», - это сделать размер элемента контейнера равным 100vw; Добавление оболочки вокруг контейнера для overflow-x; Это сделает контейнер полным, как если бы полоса прокрутки была поверх содержимого.

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
	html{ overflow-y: scroll; }
	html, body{ padding:0; margin: 0;}
	#wrapper{ overflow-x: hidden; }
	.row{ width: 100vw; }
	.row:after{ clear: both; content: ''; display: block; overflow: hidden; }
	.row-left{ background: blue; float: left; height: 40vh; width: 50vw; }
	.row-right{ background: red; float: right; height: 40vh; width: 50vw; }
	</style>
</head>
<body>

<div id="wrapper">
<div class="row">
	<div class="row-left"></div>
	<div class="row-right"></div>
</div>
</div>


</body>
</html>

Автор: SequenceDigitale.com Размещён: 21.03.2019 03:30

-2 плюса

394 Репутация автора

Это не мое решение, но помогает мне создать выпадающее полноэкранное меню с абсолютным относительным элементом в неполноте диапазона.

Мы должны получить прокрутку в css var in: root и затем использовать ее.

:root{
 --scrollbar-width: calc(100vw - 100%);
}


div { margin-right: var(--scrollbar-width); }

https://codepen.io/superkoders/pen/NwWyee

Автор: Denis Savenko Размещён: 22.05.2019 07:55

0 плюса

102 Репутация автора

Самый простой способ - установить html & body в 100vw:

html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }

Единственная проблема в том, что правая часть будет немного обрезана, если будет показана полоса прокрутки.

Автор: gonnavis Размещён: 13.06.2019 06:34

0 плюса

1 Репутация автора

Я делаю это, добавляя строку javascript для определения переменной CSS после загрузки документа:

document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");

затем в CSS вы можете использовать var(--scrollbar-width)любые необходимые вам настройки для разных браузеров с / без полос прокрутки разной ширины. Вы можете сделать что - то подобное для горизонтальной прокрутки, в случае необходимости, замены innerWidthс innerHeightи clientWidthс clientHeight.

Автор: user11990065 Размещён: 01.09.2019 07:08
Вопросы из категории :
32x32