Стилизация ползунка прокрутки css

CSS scrollbars styling

The CSS scrollbars styling module defines properties that you can use for visual styling of scrollbars. You can customize the width of the scrollbar as required. You can also customize the color of the scrollbar track, which is the background of the scrollbar, and the color of the scrollbar thumb, which is the draggable handle of the scrollbar.

Scrollbar styling in action

This example defines a thin scrollbar with a red thumb and an orange track. To view the thumb, you will need to scroll the text. After the scrollbar is visible, hover over it to see the track.

.poem  width: 300px; height: 100px; border: 1px solid; > 

.poem  overflow: scroll; scrollbar-color: red orange; scrollbar-width: thin; > 

blockquote class="poem"> h3>A Small Needful Facth3> pre> Is that Eric Garner worked for some time for the Parks and Rec. Horticultural Department, which means, perhaps, that with his very large hands, perhaps, in all likelihood, he put gently into the earth some plants which, most likely, some of them, in all likelihood, continue to grow, continue to do what such plants do, like house and feed small and necessary creatures, like being pleasant to touch and smell, like converting sunlight into food, like making it easier for us to breathe. pre > p> - a href="https://onbeing.org/poetry/a-small-needful-fact/">Ross Gaya> p> blockquote> 

Note: When customizing scrollbars, ensure that the thumb and track have enough contrast with the surrounding background. Also ensure that the scrollbar hit area is large enough for people who use touch input.

Reference

CSS properties

Related concepts

• overflow-block CSS property
• overflow-inline CSS property
• overflow-x CSS property
• overflow-y CSS property
• overflow CSS shorthand property
• overflow-clip-margin CSS property
• scrollbar-gutter CSS property
• scroll-behavior CSS property
• scroll-margin CSS shorthand property
• scroll-padding CSS shorthand property
• scroll-snap-align CSS property
• scroll-snap-stop CSS property
• scroll-snap-type CSS property
• ::-webkit-scrollbar pseudo-element
• scroll container glossary term
• scrollbar ARIA role

Specifications

See also

Found a content problem with this page?

This page was last modified on Jul 7, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS: оформление скроллбаров 2022

Для максимально возможной кросс-браузерной поддержки стилизации полос прокрутки (scrollbar) лучше использовать специальные CSS-свойства с префиксом ::webkit (они понадобятся Chrome и Safari), а также стандартизированные свойства scrollbar-width и scrollbar-color (пока для Firefox).

Таким образом, базовая настройка будет выглядеть так:

.styled-scrollbars < /* плашка-бегунок и фон */ scrollbar-color: #999 #333; >.styled-scrollbars::-webkit-scrollbar < width: 10px; /* в основном для вертикальных полос прокрутки */ height: 10px; /* в основном для горизонтальных полос прокрутки */ >.styled-scrollbars::-webkit-scrollbar-thumb < /* плашка-бегунок */ background: #999; >.styled-scrollbars::-webkit-scrollbar-track < /* фон */ background: #333; >

Применение пользовательских CSS-свойств для стилизации скроллбаров

Это позволит вынести дублирующиеся значения CSS-свойств в настройки, например:

.styled-scrollbars < --scrollbar-foreground: #999; --scrollbar-background: #333; --scrollbar-size: 10px; /* плашка-бегунок, фон */ scrollbar-color: var(--scrollbar-foreground) var(--scrollbar-background); >.styled-scrollbars::-webkit-scrollbar < width: var(--scrollbar-size); /* в основном для вертикальных полос прокрутки */ height: var(--scrollbar-size); /* в основном для горизонтальных полос прокрутки */ >.styled-scrollbars::-webkit-scrollbar-thumb < /* плашка-бегунок */ background: var(--scrollbar-foreground); /* фон */ >.styled-scrollbars::-webkit-scrollbar-track < /* фон */ background: var(--scrollbar-background); >

Sass Mixin и другие опции предварительной обработки

При использовании Sass код может выглядеть следующим образом:

@mixin scrollbars( $size: 10px, $foreground-color: #999, $background-color: #333 ) < // для Chrome и Safari &::-webkit-scrollbar < width: $size; height: $size; >&::-webkit-scrollbar-thumb < background: $foreground-color; >&::-webkit-scrollbar-track < background: $background-color; >// по стандартам (Firefox) scrollbar-color: $foreground-color $background-color; >

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

Если используется PostCSS, то для него есть плагин postcss-scrollbar . В коде используется стандартизированный синтаксис, а плагин делает соответствующие версии префиксов для разных браузеров.

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

.scrollable::-webkit-scrollbar-thumb < background-color: yellow; >.scrollable::-webkit-scrollbar-track < background-color: green; >.scrollable::-webkit-scrollbar-corner < background-color: green; >.scrollable::-webkit-scrollbar < width: 0.5rem; height: 0.5rem; >.scrollable

Более экзотические стили скроллбаров в Chrome и Safari

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

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

Вот еще несколько стилей, в которых используется подход с вендорными префиксами:

Стилизация скроллбаров с помощью JavaScript

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

Для этого должны быть десятки библиотек. Например, simplebar выглядит довольно современным с простым созданием экземпляров. Вот демонстрация:

Пример кроссбраузерной стилизации полос прокрутки (scrollbar)

Это выглядит довольно прилично в Chrome, Safari и Firefox:

Источник

Как стилизовать или убрать полосу прокрутки — CSS скроллбар

Стилизованные полосы прокрутки становятся популярными, думаю, вы уже сталкивались с такими сайтами, которые имеют уникальный скроллбар (к примеру, наш сайт). Есть два способа реализации этой задачи: с помощью CSS3 или используя jQuery плагин. Мы будем использовать наиболее простой — напишем CSS стили.

Примечание: стилизовать полосу прокрутки через -webkit префикс возможно только в браузерах, использующих механизм рендеринга Webkit (и Blink). То есть в Firefox и IE этот способ не сработает.

Часто бывает необходимо убрать или скрыть скроллбар css совсем. Для начала, давайте рассмотрим как это сделать.

1 Как убрать полосу прокрутки CSS

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

CSS /*Убрать полосу прокрутки у элемента*/ .element::-webkit-scrollbar { width: 0; } /*Убрать полосу прокрутки для всей страницы*/ ::-webkit-scrollbar { width: 0; } 

2 Как изменить скроллбар CSS

Теперь давайте рассмотрим базовую структуру полосы прокрутки:

-webkit-scrollbar состоит различных псевдо-элементов.

1. ::-webkit-scrollbar — это фон самого скроллбара.
2. ::-webkit-scrollbar-button — кнопки направления на полосе прокрутки.
3. ::-webkit-scrollbar-track — пустое пространство под индикатором прокрутки.
4. ::-webkit-scrollbar-thumb — индикатор прокрутки, перетаскиваемый элемент.

Проверим как все это работает. Чтобы попробовать изменить скроллбар css, создадим пустой HTML документ. Вам необходимо добавить style.css ваш HTML файл. В разметку добавим div с id element, имеющий полосу прокрутки, чтобы применить на него наши стили.

3 CSS стили

Для того, чтобы у элемента div появилась полоса прокрутки, добавим следующие свойства.

CSS #element { overflow-y: scroll; background-color: #ffffff; width: 200px; height: 200px; } .overflow { min-height: 400px; } 

Теперь давайте используем псевдоэлемент для создания пользовательского скроллбара. Заменим ширину по умолчанию на новую — в 7 пикселей. Затем, добавим цвет полосы через свойство background-color: #f9f9fd .

Если вы хотите изменить ширину скролла всей страницы, а не отдельного элемента, то используйте ::-webkit-scrollbar без дополнительных селекторов.

CSS #element::-webkit-scrollbar { width: 7px; background-color: #f9f9fd; } 

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-webkit-scrollbar-thumb , для того чтобы стилизовать индикатор.

CSS #element::-webkit-scrollbar-thumb { background-color: #223c50; } 

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

CSS #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } 

В заключении: вот еще несколько вариантов, которые вы можете использовать на своем сайте.

Пример 1 #element::-webkit-scrollbar { width: 10px; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background-color: #18aaaa; } #element::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2); border-radius: 10px; background-color: #f9f9fd; } 

Пример 2 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #f2bf93; background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, .25) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .25) 50%, rgba(255, 255, 255, .25) 75%, transparent 75%, transparent); } 

Пример 3 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; } #element::-webkit-scrollbar-thumb { background-color: #356184; background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .25)), color-stop(.5, transparent), to(transparent)); } 

В четвертом примере мы используем градиент. Настроить его можно в CSS генераторе градиента.

Пример 4 #element::-webkit-scrollbar { width: 10px; } #element::-webkit-scrollbar-track { -webkit-box-shadow: 5px 5px 5px -5px rgba(34, 60, 80, 0.2) inset; background-color: #f9f9fd; border-radius: 10px; } #element::-webkit-scrollbar-thumb { border-radius: 10px; background: linear-gradient(180deg, #00c6fb, #005bea); } 

Источник