Как упоминалось в заголовке, можно ли вычислить vw без полос прокрутки только в css?
Например, мой экран имеет ширину 1920px. vw возвращает 1920px, отлично. Но моя фактическая ширина тела - это только что-то вроде 1903px.
Есть ли способ получить значение 1903px только с помощью css (не только для прямых дочерних элементов body), либо мне абсолютно необходим JavaScript для этого?
Один из способов сделать это - с помощью calc. Насколько я знаю, 100% - это ширина, включая полосы прокрутки. Итак, если вы это сделаете:
body {
width: calc(100vw - (100vw - 100%));
}
Вы получаете 100vw минус ширина полосы прокрутки.
Вы можете сделать это и с высотой, если вы хотите, чтобы квадрат составлял 50% окна просмотра (минус 50% ширины scollbar)
.box {
width: calc(50vw - ((100vw - 100%)/2))
height: 0
padding-bottom: calc(50vw - ((100vw - 100%)/2))
}
Согласно спецификациям, единицы измерения относительной длины области просмотра не учитывают полосы прокрутки (и фактически предполагают, что они не существуют).
Таким образом, независимо от вашего предполагаемого поведения, вы не можете принимать во внимание полосы прокрутки при использовании этих модулей.
Браузеры Webkit исключают полосы прокрутки, другие включают их в возвращаемую ширину. Это, конечно, может привести к проблемам: например, если у вас есть динамически сгенерированный контент с ajax, который динамически увеличивает высоту, Safari может переключаться с макета на другой во время визуализации страницы... Хорошо, это случается не часто, но это что-то знать о. На мобильных устройствах проблем меньше, поскольку полосы прокрутки обычно не отображаются.
Тем не менее, если ваша задача - точно рассчитать ширину области просмотра без полос прокрутки во всех браузерах, насколько я знаю, хороший метод заключается в следующем:
width = $('body').innerWidth();
предварительно установив:
body {
margin:0;
}
В модуле vw не учитывается полоса прокрутки overflow-y, если для параметра overflow-y установлено значение auto.
Измените его на overflow-y: scroll;, а элемент vw будет отображаться без полосы прокрутки.
Единственный недостаток, который нужно учитывать. Если содержимое вписывается в экран, полоса прокрутки отображается в любом случае. Возможным решением является изменение от auto до scroll в javascript.
Единственный способ, с помощью которого я нашел, что он работает, не путая ваш код с "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>Самый простой способ - установить html & body в 100vw:
html, body{ width:100vw; overflow-x: hidden; overflow-y: auto; margin: 0; }
Единственная проблема в том, что правая часть будет немного обрезана, если будет показана полоса прокрутки.
Я делаю это, добавляя строку javascript для определения переменной CSS после загрузки документа:
document.documentElement.style.setProperty('--scrollbar-width', (window.innerWidth - document.documentElement.clientWidth) + "px");
затем в CSS вы можете использовать var(--scrollbar-width) для внесения любых настроек, необходимых для разных браузеров с/без полос прокрутки разной ширины. При необходимости вы можете сделать нечто подобное для горизонтальной полосы прокрутки, заменив innerWidth на innerHeight и clientWidth на clientHeight.
Это не мое решение, но помогает мне создать выпадающее полноэкранное меню с абсолютным относительным элементом в не полном диапазоне.
Мы должны получить прокрутку в css var in: root и затем использовать ее.
:root{
--scrollbar-width: calc(100vw - 100%);
}
div { margin-right: var(--scrollbar-width); }