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