KARABAS интернет-магазин
it-решений
Alexandr Yaovlev 21 Dec 2023 Alexandr Yaovlev 184

Новые единицы CSS Viewport не решают классическую проблему со скроллбаром: почему это происходит и как найти выход?

Новые единицы CSS Viewport не решают классическую проблему со скроллбаром: почему это происходит и как найти выход?


Обзор статьи

Браузеры выпустили новый набор CSS viewport units в 2022 году. Эти единицы облегчают размер элементов в мобильных браузерах, где интерфейс браузера влияет на высоту области просмотра при прокрутке страницы пользователем. К сожалению, новые единицы не облегчают размер элементов в настольных браузерах, где классические полосы прокрутки влияют на ширину и высоту области просмотра.


Два типа области просмотра

Существует два разных области просмотра в веб-браузерах: визуальный области просмотра и области просмотра макета. Когда страница впервые загружается в браузере, визуальный области просмотра и области просмотра макета имеют точно такой же размер и положение.


Два типа зума

Два типа зума определены в модуле CSSOM View: зум страницы и зум с коэффициентом масштабирования. Зум страницы доступен в настольных браузерах. Зум с коэффициентом масштабирования доступен на всех платформах.


Элементы позиционирования

Область просмотра макета является "содержащим блоком" для элементов с фиксированным позиционированием. Начальный содержащий блок (ICB) - это прямоугольник, который расположен в верхней части веб-страницы. ICB является обычным содержащим блоком для абсолютно позиционированных элементов.


Единицы обзора CSS

Единицы обзора CSS основаны на области просмотра макета и не изменяются при изменении размера визуального области просмотра. Оригинальные шесть единиц обзора появились в браузерах десять лет назад. Новые единицы появились в основных браузерах в течение последнего года.


Полосы прокрутки

В веб-браузере полосы прокрутки могут быть классическими или наложенными. На мобильных платформах полосы прокрутки исключительно наложенные. На настольных платформах пользователь может выбрать тип полосы прокрутки в настройках операционной системы. Главное различие между этими двуми типами полос прокрутки заключается в том, что классические полосы прокрутки помещаются в отдельный "желоб полосы прокрутки", который занимает место при наличии, что уменьшает размер области просмотра макета.


Проблема с полосами прокрутки и единицами обзора

Длина 100