Ширина прокрутки в браузерах

Обновлено: 07.07.2024

Как пользователь Firefox, я редко вижу разноцветные полосы прокрутки, что привело меня к выводу, что по-прежнему невозможно настроить стиль полосы прокрутки во всех браузерах. Я был неправ; Сегодня я узнал, что полосу прокрутки можно раскрасить в настольных браузерах Chrome, Edge, Safari и (!) Firefox.

Стильные псевдоэлементы полосы прокрутки в Safari, Chrome и Edge

Браузеры WebKit и Chromium позволяют стилизовать полосу прокрутки с помощью множества псевдоэлементов:

  • ::-webkit-полоса прокрутки
  • ::-webkit-scrollbar-button
  • ::-webkit-scrollbar-thumb
  • ::-webkit-scrollbar-track
  • ::-webkit-scrollbar-track-piece
  • ::-webkit-scrollbar-угол
  • ::-webkit-resizer

Добавляйте тени, увеличивайте их, делайте свое дело! Однако этот пост касается только окраски полосы прокрутки. Но если вы хотите узнать больше о реализации WebKit/Chromium, найдите дополнительную информацию в документах MDN webkit-scrollbar.

Короче говоря: два псевдоэлемента помогают раскрасить полосу прокрутки в Chrome/Edge/Safari и сделать ее более похожей на дизайн вашего веб-сайта!

Пример цветной полосы прокрутки

Вы могли заметить, что эти свойства по-прежнему содержат префикс -webkit. Так что насчет Фаерфокса? И разве не должен быть стандарт для стиля полосы прокрутки?

На помощь приходит спецификация стиля полосы прокрутки

Оказывается, есть! Сегодня я узнал о спецификации CSS Scrollbars Styling Module Level 1. Он определяет свойства CSS полосы прокрутки и ширины полосы прокрутки. И, как оказалось, Firefox некоторое время поддерживает их!

Параметры стиля полосы прокрутки ограничены этими двумя свойствами, но, с другой стороны, для окрашивания полосы прокрутки вам понадобится только одна строка (и никаких псевдоэлементов)!

Однако свойство CSS scrollbar-color требует рассмотрения двух моментов.

Во-первых, в macOS цвет полосы прокрутки действует только в том случае, если на уровне операционной системы включен параметр "Всегда показывать полосы прокрутки". Если этот параметр отключен, вы увидите обычные серые полосы прокрутки, которые появляются только при прокрутке (оооооо!).

Во-вторых, как пользователь Mac, я привык к очень тонким полосам прокрутки. Когда я работаю на машине с Windows, я всегда удивляюсь, насколько они «настоящими». А когда полосы прокрутки окрашены, они выделяются еще больше!

В этом случае в игру вступает другое свойство CSS: ширина полосы прокрутки. Это свойство принимает тонкое значение, благодаря которому полосы прокрутки Windows выглядят почти хорошо!

Визуальное сравнение ширины полосы прокрутки для Firefox в Windows. Auto большой и неуклюжий, а тонкий выглядит тонким и визуально приятным.

Заключение

И это все: если вы хотите, чтобы полосы прокрутки соответствовали вашему дизайну в настольных версиях Chrome, Edge, Safari и Firefox, используйте сочетание префикса поставщика ( ::-webkit-scrollbar ) и стандартизированного ( scrollbar-color ) CSS. свойства.

Вот CSS, который я только что добавил на этот сайт (октябрь 2021 г.), чтобы раскрасить полосы прокрутки.

DigitalOcean объединяет усилия с CSS-Tricks! Специальное приветственное предложение: получите бесплатный кредит в размере 100 долларов США.

Свойство scrollbar-width в CSS управляет шириной или «толщиной» полосы прокрутки. scrollbar-width является частью черновика модуля «Полосы прокрутки» Рабочей группы CSS, уровень 1, который все еще находится в стадии разработки. На момент написания этой статьи было достигнуто общее мнение, что ширина полосы прокрутки, вероятно, будет включена в будущие версии CSS, но ведутся споры о том, будет ли разрешен переменный аргумент или параметры будут ограничены предустановленными значениями (подробнее об этом см. те позже).

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

Например, представьте интерфейс редактирования текста, в котором

должен помещаться в короткий узкий контейнер. В такой ситуации полоса прокрутки может занимать большую часть доступного места:


С помощью scrollbar-width мы можем установить тонкую ширину, чтобы сэкономить место:

текстовая область с тонкой полосой прокрутки

Или мы можем установить для ширины значение none, чтобы полностью удалить ее, сэкономив еще больше места (при условии, что полоса прокрутки не исчезает):

scrollbar-width принимает следующие значения:

  • auto – это значение по умолчанию, которое отображает стандартные полосы прокрутки для пользовательского агента.
  • thin укажет агенту пользователя использовать более тонкие полосы прокрутки, когда это применимо.
  • ни один из них не будет полностью скрывать полосу прокрутки, не влияя на возможность прокрутки элемента.
  • обсуждается, но (если будет добавлено) это будет максимальная ширина полосы прокрутки.

Это сделано для общей настройки полос прокрутки. О том, как лучше всего оформить кросс-браузерную полосу прокрутки, см. здесь.

Эти данные о поддержке браузера предоставлены компанией Caniuse, в которой содержится более подробная информация. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

В сентябре 2018 года W3C CSS Scrollbars определила спецификации для настройки внешнего вида полос прокрутки с помощью CSS.

По состоянию на 2020 год 96 % пользователей Интернета используют браузеры, поддерживающие стили полосы прокрутки CSS. Однако вам нужно будет написать два набора правил CSS для поддержки браузеров Blink и WebKit, а также Firefox.

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

Предпосылки

Чтобы следовать этой статье, вам потребуется:

Стили полос прокрутки в Chrome, Edge и Safari

В настоящее время стили полос прокрутки для Chrome, Edge и Safari доступны с префиксом псевдоэлемента поставщика -webkit-scrollbar .

Вот пример использования псевдоэлементов ::-webkit-scrollbar , ::-webkit-scrollbar-track и ::webkit-scrollbar-thumb:

Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:

Снимок экрана с примером веб-страница с настраиваемой полосой прокрутки с синей полосой прокрутки на оранжевой дорожке». /><br /></p> <p>Этот код работает в последних версиях Chrome, Edge и Safari.</p> <p>К сожалению, W3C официально отказалась от этой спецификации, и со временем ее поддержка, скорее всего, будет прекращена.</p> <h2>Стили полос прокрутки в Firefox</h2> <p>В настоящее время стилизация полос прокрутки для Firefox доступна с новыми полосами прокрутки CSS.</p> <p>Вот пример, в котором используются свойства scrollbar-width и scrollbar-color:</p> <p>Вот скриншот полосы прокрутки, созданной с помощью этих правил CSS:</p> <p><img class=

Mona Lisa Overflow (изображение предоставлено Скоттом Джелом)

Полоса прокрутки — это скромный, но продуктивный механизм, который служит основным средством перемещения по документу. Но это еще не все, что может сделать полоса прокрутки!Эта скромная рабочая лошадка также дает осмысленный намек на длину документа, выполняя двойную функцию индикатора выполнения документа.

Полоса прокрутки подвергается атаке. Scrolljacking перехватывает поведение прокрутки по умолчанию, нарушая подразумеваемый контракт между длиной документа и высотой полосы прокрутки.

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

Классические настольные операционные системы продолжили эту тенденцию, пытаясь свести к минимуму навязчивость дизайна классической полосы прокрутки.

Прежде чем мы зайдем слишком далеко, давайте дадим несколько определений:

  • Навязчивые полосы прокрутки: полосы прокрутки, которые занимают всю площадь экрана. Они не накладываются поверх содержимого, а отображаются рядом с ним.
  • Ненавязчивые полосы прокрутки: полосы прокрутки, расположенные над содержимым. Они не отнимают часть экрана от контейнера, которому они принадлежат.

По умолчанию в iOS и Android полосы прокрутки ненавязчивы.

В Mac OS (Mojave на момент написания статьи) полосы прокрутки скрыты до тех пор, пока элемент не будет прокручен. Это поведение по умолчанию, когда мышь не подключена к машине. Для этого есть три варианта на панели «Общие» в Системных настройках:

Общая панель системных настроек Mac OS с выбранным параметром

Подтверждено, что этот параметр управляет поведением полос прокрутки в Chrome, Firefox и Safari, а также в новом браузере Edge на основе Chromium.

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

В Windows 10 аналогичный параметр существует в меню «Настройки» → «Экран» → «Упрощение и персонализация Windows».

Панель настроек Windows 10 с установленным флажком

К сожалению, даже если этот параметр включен, он не влияет на поведение полосы прокрутки в Firefox, Chrome, Internet Explorer и Edge — независимо от того, основаны ли они на Chromium или EdgeHTML.

Демонстрация стиля полосы прокрутки по умолчанию в Windows 10 (в Chrome )

Полосы прокрутки Windows не только только навязчивы по умолчанию, но и особенно тяжелы с точки зрения дизайна. По умолчанию они намного шире, чем их аналоги в Mac OS, и обычно соответствуют цветам операционной системы (а не цветовой палитре страницы).

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

  1. Мы хотим, чтобы полосы прокрутки на рабочем столе были более привлекательными. Особенно важно для контейнеров переполнения внутри области просмотра, которые должны лучше сочетаться с эстетикой визуального дизайна (на мой взгляд, визуальные эффекты не так важны для полос прокрутки на уровне страницы, но я уверен, что это спорный вопрос).< /li>
  • Сведите к минимуму пространство, которое может занимать полоса прокрутки. Полосы прокрутки Windows по умолчанию навязчивы и очень широки.
  • Учитывайте изменения пользовательских настроек. Если пользователь выбрал нестандартные параметры поведения полосы прокрутки, по возможности соблюдайте эти настройки.
  • Избегайте тяжелых решений JavaScript, которые нормализуют ненавязчивые полосы прокрутки и создают нагрузку на конечного пользователя (например, прекрасный плагин OverlayScrollbars).

Если вам нравятся ненавязчивые полосы прокрутки в Internet Explorer и Edge на базе EdgeHTML, используйте -ms-overflow-style: -ms-autohiding-scrollbar; и они волшебным образом поменяются местами (легко, правда?).

Примечание: когда будет выпущена iOS 13, -webkit-overflow-scrolling: touch может не потребоваться для улучшения физики прокрутки на iOS (хотя вы можете оставить его на некоторое время для более старых версий iOS). .

Вы также можете прочитать о соответствующем свойстве CSS overscroll-behavior, которое управляет прокруткой документа, когда содержимое контейнера переполнения прокручивается до границы.

Firefox поддерживает CSS-свойства без префикса scrollbar-color и scrollbar-width .

Обратите внимание, что для ясности в этих примерах кода используются переменные CSS, которые не поддерживаются Internet Explorer 11.

Однако в этом коде есть небольшая проблема. Когда вы устанавливаете высоту или ширину псевдоэлемента ::-webkit-scrollbar, в Mac OS ненавязчивые полосы прокрутки заменяются на навязчивые (переопределяя конфигурацию по умолчанию). Однако мы можем исправить это с помощью JavaScript!

Мы можем добавить небольшой тест функции JavaScript, чтобы определить, является ли полоса прокрутки по умолчанию навязчивой или нет. Это выглядит примерно так:

Мы применяем наш класс layout-scrollbar-obtrusive к документу, когда наши полосы прокрутки навязчивы. Мы можем использовать это, чтобы применить ширину и высоту только к навязчивым полосам прокрутки, избегая поведения подкачки, описанного ранее (и уважая предпочтения пользователя!).

На сенсорных устройствах с ненавязчивой полосой прокрутки (например, iOS и Android) мы бесплатно сохраняем поведение по умолчанию.

В Mac OS мы можем учитывать системные настройки пользователя. Это означает отсутствие непреднамеренного переключения между ненавязчивой и навязчивой полосами прокрутки. Мы применяем наш стиль только к навязчивым, видимым полосам прокрутки, чтобы соответствовать нашим требованиям к дизайну.

В Windows, в Firefox и Chrome не было возможности использовать ненавязчивые полосы прокрутки, но здесь мы также смогли применить элемент управления, основанный только на CSS. С рабочими демонстрациями настраиваемых полос прокрутки CSS мы смогли заручиться поддержкой команды дизайнеров и остановиться на этой золотой середине, избегая более тяжелого решения JavaScript.

Читайте также: