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

Question 1

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

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

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

Question 2

Один из способов сделать это - использовать 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))
}

Question 3

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

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

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

Question 4

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

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

Question 5

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

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

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

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

body {
    margin:0;
}

Question 6

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

Измените его на overflow-y: scroll;иvw единицей будет область просмотра с полосой прокрутки. Затем вы можете вычесть размер полосы прокрутки из значения vw с помощью calc (). Вы также можете определить ширину полосы прокрутки, чтобы она не зависела от браузера.

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

Question 7

Единственный способ, которым я обнаружил, что это работает, не запутывая ваш код с помощью "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>

Развернуть фрагмент

Question 8

Если бы случай был чем-то похожим на слайдер: как указано во многих ответах, ширина 100% не учитывает полосу прокрутки, а 100vw -. В случае наличия большого количества элементов, которые должны принимать ширину окна и которые вложены в контейнер уже со 100% шириной окна (или чья естественная ширина блока будет такой), вы можете использовать:

Гибкий дисплей для контейнера
Flex: 0 0100% для дочерних элементов

Question 9

100vw = ширина экрана с полосой прокрутки 100% = ширина экрана без полосы прокрутки

При измерении ширины экрана всегда предпочтительно использовать calc (100% - 50 пикселей). Даже в браузерах Windows, где полоса прокрутки видна напрямую, возвращайте ширину экрана иначе, чем в браузерах macOS.

Question 10

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

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

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

Question 11

в моем случае мне нужно установить div 100wh - 230px, и я столкнулся с той же проблемой с этой дополнительной шириной прокрутки, что я сделал:

width: calc(100vw - (100vw - 100%) - 230px);

Question 12

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

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

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


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

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

Answer 1

88

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

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

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

css viewport-units Куница Зандер
источник

2

но ... полоса прокрутки не включена в ширину области просмотра !?

Danield

@Danield извините, я обновил свой вопрос

Marten Zander

Если мы говорим о какой-то искусственной полосе прокрутки, которую вы помещаете туда, то, возможно, вы ищете что-то вроде этого: width: calc(100vw - scrollbarWidth)где 'scrollbarWidth' - какое-то фиксированное значение, например 15 пикселей

Даниил

@Danield Мне действительно нужно исправление кроссбраузерности, где у меня есть переменная ширина каждого скроллера нативного браузера

Мартен Зандер

2

В настоящее время я работаю над страницей с использованием bootstrap 4 в Chrome v64, а% - это внутренняя ширина (не включая полосу прокрутки), а vw - внешняя ширина (ширина, включая полосу прокрутки), поэтому я не могу использовать vw и, как OP, я не Не понимаю, почему это происходит.

Eric_B

Answer 2

2

но ... полоса прокрутки не включена в ширину области просмотра !?

Danield

Answer 3

@Danield извините, я обновил свой вопрос

Marten Zander

Answer 4

Если мы говорим о какой-то искусственной полосе прокрутки, которую вы помещаете туда, то, возможно, вы ищете что-то вроде этого: width: calc(100vw - scrollbarWidth)где 'scrollbarWidth' - какое-то фиксированное значение, например 15 пикселей

Даниил

Answer 5

@Danield Мне действительно нужно исправление кроссбраузерности, где у меня есть переменная ширина каждого скроллера нативного браузера

Мартен Зандер

Answer 6

2

В настоящее время я работаю над страницей с использованием bootstrap 4 в Chrome v64, а% - это внутренняя ширина (не включая полосу прокрутки), а vw - внешняя ширина (ширина, включая полосу прокрутки), поэтому я не могу использовать vw и, как OP, я не Не понимаю, почему это происходит.

Eric_B

Answer 7

116

Один из способов сделать это - использовать 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))
}

Маттиас Оттоссон
источник

42

Это удивительно, но, к сожалению, работает только в том случае, если размер элемента, который вы изменяете, является прямым дочерним элементом bodyили элементом, имеющим такую же ширину body(в противном случае 100%будет ссылаться на неправильную ширину элемента). В этом случае вы можете просто использовать проценты. Если я чего-то не упускаю?

Nateowami

7

Не годится для случаев, когда учет 100vw для полосы прокрутки действительно является проблемой, то есть когда вам нужно поместить блок 100vw в контейнер с фиксированной шириной.

конечно

56

Математика: 100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% я что-то упускаю?

Камил Келчевски

4

К сожалению, это не сработает для элемента с абсолютным позиционированием, поскольку 100% там недоступно :(

Hrvoje Golcic

4

@TKoL В каждом случае, когда его решение действительно решает проблему, ширина: 50% будет работать точно так же. Камил Келчевский прав, это решение бесполезно.

Элиэзер Берлин

Answer 8

42

Это удивительно, но, к сожалению, работает только в том случае, если размер элемента, который вы изменяете, является прямым дочерним элементом bodyили элементом, имеющим такую же ширину body(в противном случае 100%будет ссылаться на неправильную ширину элемента). В этом случае вы можете просто использовать проценты. Если я чего-то не упускаю?

Nateowami

Answer 9

7

Не годится для случаев, когда учет 100vw для полосы прокрутки действительно является проблемой, то есть когда вам нужно поместить блок 100vw в контейнер с фиксированной шириной.

конечно

Answer 10

56

Математика: 100vw - (100vw - 100%) = 100vw - 100vw + 100% = 100% я что-то упускаю?

Камил Келчевски

Answer 11

4

К сожалению, это не сработает для элемента с абсолютным позиционированием, поскольку 100% там недоступно :(

Hrvoje Golcic

Answer 12

4

@TKoL В каждом случае, когда его решение действительно решает проблему, ширина: 50% будет работать точно так же. Камил Келчевский прав, это решение бесполезно.

Элиэзер Берлин

Answer 13

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

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

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

Answer 14

Для меня возвращаемый размер вдвое больше, чем нужно. Есть подсказки? Дает мне 16 пикселей, но 8 пикселей было бы достаточно ...

Фабиан Бейерлейн

Answer 15

9

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

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

Призрак Мадары
источник

Опять же, vwсогласно спецификации, они не знают о существовании полосы прокрутки. Так что вы не можете их учитывать.

Призрак Мадары

1

Согласно спецификациям, vw убирает ширину полосы прокрутки, ЕСЛИ не происходит переполнение автоматически, тогда она работает как «скрытая» для значения vw. Поэтому, если страница должна переполняться, установите ее на «прокрутку». С помощью overflow-x и overflow-y вы выбираете, какую полосу прокрутки отображать.

Кулвар

1

@Kulvar просто попробовал это в хроме, установка тела на overflow-y: scrollvs overflow-y: auto, похоже, не меняет вычисленное значение для единиц vw. В частности, на моем сайте установлено значение 3.82vw, а ширина моего компьютера - 1920 пикселей. С автоматическим переполнением 3.82vw = 73.344px, а затем я попытался использовать прокрутку переполнения, которая также выдает 73.344px, без изменений, тогда как на самом деле он должен выдавать 72.6946px, если вы были правы

TKoL

100% учитывает полосы прокрутки, поэтому, если ваш случай 100vw, если вы можете, измените его на 100%

Jairo

Answer 16