Css scrollbar border radius

Настройка полосы прокрутки в CSS

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

Постановка задачи

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

Решение находится быстро. В 2018 году появилась спецификация CSS Scrollbars , которая определяет настройку внешнего вида полосы. Этой спецификацией введены два новых свойства, которые влияют на визуальный стиль скроллбара:

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

Применение свойств CSS Scrollbars

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

• бегунок (thumb), за который мы тянем, чтобы прокрутить страницу;
• дорожка (track), по которой перемещается бегунок.

Попробуем применить к ним свойства для стилизации внешнего вида. Сначала разберёмся с шириной элемента. У scrollbar-width три возможных значения:

Указать ширину элемента в пикселях или процентах нельзя. Это ограничение введено для того, чтобы сохранять согласованность в отображении элементов управления в разных браузерах и ОС. Или, проще говоря, чтобы исключить зоопарк кастомных решений, который может запутать пользователей.

Свойство scrollbar-color принимает на вход два значения. Первое — цвет бегунка, второе — цвет дорожки. По умолчанию задано значение auto, которое говорит браузеру, что нужно использовать дефолтные параметры.

Соединим оба свойства и получим такую стилизацию:

body scrollbar-width: thin; 
scrollbar-color: green black;
>

Выглядит очень просто. Проверяем в браузере Firefox.

Всё работает, полоса для скролла на странице стала чёрно-зелёной и тонкой.

Поддержка кроссбраузерности

В тестовой среде стилизация скролла с помощью scrollbar-color и scrollbar-width выглядит отлично. Но перед отправкой в продакшн нужно проверить кроссбраузерность — не все же пользуются Firefox.

Открываем стилизованную страницу в Google Chrome и видим, что полоса прокрутки осталась дефолтной. В Edge и Safari — тот же результат. Чтобы проверить свои подозрения, смотрим поддержку свойств CSS Scrollbars через Can I Use. Ситуация печальная. Спустя четыре года после представления спецификации удобная настройка полосы прокрутки недоступна в большинстве браузеров. Исключение — десктопная и мобильная версии Firefox.

Это что же, у нас не получится реализовать отрисованный дизайн и придётся всё менять?

Спокойно, решение есть. Для изменения визуального представления скроллбара в Chrome, Edge и Safari можно использовать псевдоэлементы:

• ::-webkit-scrollbar — параметры всего элемента навигации;
• ::-webkit-scrollbar-track — параметры дорожки.
• ::webkit-scrollbar-thumb — параметры бегунка.

Использование псевдоэлементов выглядит как костыль. Но делать нечего, добрасываем стили для кроссбраузерности:

body::-webkit-scrollbar width: 15px; /* Ширина всего элемента навигации */
>

body::-webkit-scrollbar-track background: #fff; /* Цвет дорожки */
>

body::-webkit-scrollbar-thumb background-color: #050c26; /* Цвет бегунка */ 
border-radius: 20px; /* Округление бегунка */ 
border: 3px solid #050c26; /* Оформление границ бегунка */
>

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

Огромное название Timeweb Cloud перекликается по цвету с очень широким скроллбаром. Отдельная спецификация для элемента scrollbar такой возможности не предполагает. Там выбор ограничен двумя вариантами — автоматический расчёт ширины или отображение тонкого элемента навигации (насколько это возможно, учитывая системные настройки).

Та же история с цветами. С помощью псевдоэлементов можно задавать не только цвета, но и градиенты. Немного изменим стиль бегунка:

body::-webkit-scrollbar-thumb background: linear-gradient(45deg, #EECFBA, #C5DDE8); 
border-radius: 20px; 
border: 3px solid #050c26;
>

Теперь бегунок переливается разными цветами.

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

Заключение

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

Источник

CSS: современный способ оформления скроллбаров

Настройка полосы прокрутки (scrollbar) в основных браузерах была трудна и неприятна примерно до сентября 2018 года, когда был выпущен рабочий проект W3C CSS Scrollbars, который выглядит как реальный способ устранить трудности стилизации скроллбаров.

На протяжении многих лет появлялись различные способы сделать это. Microsoft Internet Explorer был одним из первых, кто предоставил CSS API для скроллбаров, но многие разработчики были настолько разочарованы реализацией, что создавали собственные решения с помощью JavaScript.

Однако, JavaScript-решения тоже не во всём идеальны, например им трудно эмулировать высокопроизводительное поведение, допустим, прокрутку с инерцией или прокрутку больших документов.

Перенесемся в настоящее время, теперь, когда Internet Explorer вытесняется Microsoft Edge, это сводится к двум подходам:

• Chrome/Edge/Safari используют -webkit-scrollbar
• Firefox использует новую спецификацию CSS Scrollbars API (т.е. scrollbar-color и scrollbar-width ).

Давайте посмотрим на некоторые примеры кода!

Скроллбары в Chrome/Edge/Safari

В Chrome/Edge/Safari для стилизации прокрутки доступны css-свойства с вендорным префиксом -webkit-scrollbar .

body::-webkit-scrollbar < width: 12px; /* ширина scrollbar */ >body::-webkit-scrollbar-track < background: orange; /* цвет дорожки */ >body::-webkit-scrollbar-thumb < background-color: blue; /* цвет плашки */ border-radius: 20px; /* закругления плашки */ border: 3px solid orange; /* padding вокруг плашки */ >

Есть хорошие новости… И плохие новости…

Хорошие новости! Этот код прекрасно работает в последних выпусках Chrome/Edge/Safari!

Плохие новости. К сожалению, W3C официально отказалась от этой спецификации, поэтому можем ожидать в ближайшие годы её постепенное устаревание.

Скроллбары в Firefox

Firefox – чемпион в использовании новых стандартов W3C, они всегда готовы попробовать новые API. Таким образом, новые функции CSS Scrollbars уже доступны в обычных выпусках Firefox:

Здесь легко заметить несколько различий по сравнению с устаревшей спецификацией —webkit-scrollbar .

Во-первых, это лаконичный css-код! А во-вторых, в нём отсутствуют такие функции, как создание отступов и скруглений для плашки скролла. Поскольку спецификация всё ещё меняется, эти недостающие функции могут быть в неё включены.

Дальше-то, что?

Как стилизовать полосы прокрутки, с учётом отсутствия единого авторитетного API? Надо просто объединить оба подхода!

/* W3C standard сейчас только для Firefox */ * < scrollbar-width: thin; scrollbar-color: blue orange; >/* для Chrome/Edge/Safari */ *::-webkit-scrollbar < height: 12px; width: 12px; >*::-webkit-scrollbar-track < background: orange; >*::-webkit-scrollbar-thumb

Когда —webkit-scrollbar устареет, можете спокойно вернуться к новому стандарту CSS Scrollbars.

Вариант с использованием настраиваемых CSS-свойств (CSS-переменные). В этом случае появляется возможность управлять настройками CSS-свойств полосы прокрутки из Javascript, например, для управления темами:

Ещё можно поэкспериментировать с CSS-градиентом, но этот вариант только для Webkit-браузеров:

Источник

How To Style Scrollbars with CSS

In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS.

As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.

In this tutorial, you will learn how to use CSS to customize scrollbars to support modern browsers.

Prerequisites

To follow along with this article, you will need:

Styling Scrollbars in Chrome, Edge, and Safari

Currently, styling scrollbars for Chrome, Edge, and Safari is available with the vendor prefix pseudo-element -webkit-scrollbar .

Here is an example that uses ::-webkit-scrollbar , ::-webkit-scrollbar-track , and ::webkit-scrollbar-thumb pseudo-elements:

body::-webkit-scrollbar  width: 12px; /* width of the entire scrollbar */ > body::-webkit-scrollbar-track  background: orange; /* color of the tracking area */ > body::-webkit-scrollbar-thumb  background-color: blue; /* color of the scroll thumb */ border-radius: 20px; /* roundness of the scroll thumb */ border: 3px solid orange; /* creates padding around scroll thumb */ > 

Here is a screenshot of the scrollbar that is produced with these CSS rules:

This code works in the latest releases of Chrome, Edge, and Safari.

Unfortunately, this spec has been formally abandoned by W3C and will likely be deprecated over time.

Styling Scrollbars in Firefox

Currently, styling scrollbars for Firefox is available with the new CSS Scrollbars.

Here is an example that uses scrollbar-width and scrollbar-color properties:

body  scrollbar-width: thin; /* "auto" or "thin" */ scrollbar-color: blue orange; /* scroll thumb and track */ > 

Here is a screenshot of the scrollbar that is produced with these CSS rules:

This specification shares some commonality with the -webkit-scrollbar specification for controlling the color of the scrollbar. However, there is presently no support for modifying the padding and roundness for the “track thumb”.

Building Future-Proof Scrollbar Styles

You can write your CSS in a way to support both -webkit-scrollbar and CSS Scrollbars specifications.

Here is an example that uses scrollbar-width , scrollbar-color , ::-webkit-scrollbar , ::-webkit-scrollbar-track , ::webkit-scrollbar-thumb :

/* Works on Firefox */ *  scrollbar-width: thin; scrollbar-color: blue orange; > /* Works on Chrome, Edge, and Safari */ *::-webkit-scrollbar  width: 12px; > *::-webkit-scrollbar-track  background: orange; > *::-webkit-scrollbar-thumb  background-color: blue; border-radius: 20px; border: 3px solid orange; > 

Blink and WebKit browsers will ignore rules they do not recognize and apply -webkit-scrollbar rules. Firefox browsers will ignore rules they do not recognize and apply CSS Scrollbars rules. Once Blink and WebKit browsers fully deprecate the -webkit-scrollbar specification, they will gracefully fall back to the new CSS Scrollbars specification.

Conclusion

In this article, you were introduced to using CSS to style scrollbars and how to ensure these styles are recognized in most modern browsers.

It is also possible to simulate a scrollbar by hiding the default scrollbar and using JavaScript to detect height and scroll position. However, these approaches run into limitations with reproducing experiences like inertia scrolling (e.g., decaying motion when scrolling via trackpads).

If you’d like to learn more about CSS, check out our CSS topic page for exercises and programming projects.

Want to deploy your application quickly? Try Cloudways, the #1 managed hosting provider for small-to-medium businesses, agencies, and developers — for free. DigitalOcean and Cloudways together will give you a reliable, scalable, and hassle-free managed hosting experience with anytime support that makes all your hosting worries a thing of the past. Start with $100 in free credits!

Источник