0 added
0 removed
Original
2026-01-01
Modified
2026-02-26
1
<p><strong>Сейчас кастомные скроллбары становятся все более популярными. Есть разные причины для этого, например, дефолтный скроллбар может совершенно не встраиваться в дизайн или менять свое поведение в зависимости от ОС. Давайте рассмотрим, как его кастомизировать.</strong></p>
1
<p><strong>Сейчас кастомные скроллбары становятся все более популярными. Есть разные причины для этого, например, дефолтный скроллбар может совершенно не встраиваться в дизайн или менять свое поведение в зависимости от ОС. Давайте рассмотрим, как его кастомизировать.</strong></p>
2
<p>Хочу сразу объяснить: у скроллбара есть track и thumb</p>
2
<p>Хочу сразу объяснить: у скроллбара есть track и thumb</p>
3
<h2>Содержание</h2>
3
<h2>Содержание</h2>
4
<ul><li><a>Кастомизация дизайна скроллбара</a></li>
4
<ul><li><a>Кастомизация дизайна скроллбара</a></li>
5
<li><a>Старый синтаксис</a></li>
5
<li><a>Старый синтаксис</a></li>
6
<li><a>Новый синтаксис</a></li>
6
<li><a>Новый синтаксис</a></li>
7
<li><a>Вид скроллбара для всего сайта</a></li>
7
<li><a>Вид скроллбара для всего сайта</a></li>
8
<li><a>Парочку примеров</a></li>
8
<li><a>Парочку примеров</a></li>
9
</ul><h2>Кастомизация дизайна скроллбара</h2>
9
</ul><h2>Кастомизация дизайна скроллбара</h2>
10
<p>Раньше кастомизировать скроллбар можно было только для Webkit, поэтому Firefox и IE сразу выходили из этой игры. Сейчас у нас есть новый синтаксис, который работает только для Firefox, поэтому это упростит нам жизнь, особенно когда поддержка новых свойств увеличится.</p>
10
<p>Раньше кастомизировать скроллбар можно было только для Webkit, поэтому Firefox и IE сразу выходили из этой игры. Сейчас у нас есть новый синтаксис, который работает только для Firefox, поэтому это упростит нам жизнь, особенно когда поддержка новых свойств увеличится.</p>
11
<h2>Старый синтаксис</h2>
11
<h2>Старый синтаксис</h2>
12
<p>•<strong>The Scrollbar Width</strong></p>
12
<p>•<strong>The Scrollbar Width</strong></p>
13
<p>Определяет размер скроллбара. Для горизонтальных скроллбаров используйте width, а для вертикальных - height.</p>
13
<p>Определяет размер скроллбара. Для горизонтальных скроллбаров используйте width, а для вертикальных - height.</p>
14
<p>•<strong>The Scrollbar Track</strong></p>
14
<p>•<strong>The Scrollbar Track</strong></p>
15
<p>Вся полоса прокрутки полностью (смотри скрин выше). Мы можем стилизовать это с помощью background colors, shadows, border-radius, и borders.</p>
15
<p>Вся полоса прокрутки полностью (смотри скрин выше). Мы можем стилизовать это с помощью background colors, shadows, border-radius, и borders.</p>
16
<p>•<strong>The Scrollbar Thumb</strong></p>
16
<p>•<strong>The Scrollbar Thumb</strong></p>
17
<p>Очень важно также не забыть стилизовать ползунок, так как именно с ним будут взаимодействовать пользователи.</p>
17
<p>Очень важно также не забыть стилизовать ползунок, так как именно с ним будут взаимодействовать пользователи.</p>
18
<h2>Новый синтаксис</h2>
18
<h2>Новый синтаксис</h2>
19
<p>•<strong>The Scrollbar Width</strong></p>
19
<p>•<strong>The Scrollbar Width</strong></p>
20
<p>Здесь, в отличие от Webkit, мы не можем указывать числа. Больше всего мы будем оперировать со значениями<strong>auto</strong>и<strong>thin.</strong></p>
20
<p>Здесь, в отличие от Webkit, мы не можем указывать числа. Больше всего мы будем оперировать со значениями<strong>auto</strong>и<strong>thin.</strong></p>
21
<p>•<strong>Scrollbar Color</strong></p>
21
<p>•<strong>Scrollbar Color</strong></p>
22
<p>С помощью этого свойства мы можем указать цвета как для полосы прокрутки, так и для ползунка.</p>
22
<p>С помощью этого свойства мы можем указать цвета как для полосы прокрутки, так и для ползунка.</p>
23
<h2>Вид скроллбара для всего сайта</h2>
23
<h2>Вид скроллбара для всего сайта</h2>
24
<p>Необязательно указывать вид скроллбара для всех тегов/классов, мы можем задать это глобально:</p>
24
<p>Необязательно указывать вид скроллбара для всех тегов/классов, мы можем задать это глобально:</p>
25
<p>•<strong>Старый синтаксис</strong></p>
25
<p>•<strong>Старый синтаксис</strong></p>
26
<p>•<strong>Новый синтаксис</strong></p>
26
<p>•<strong>Новый синтаксис</strong></p>
27
<h2>Парочку примеров</h2>
27
<h2>Парочку примеров</h2>
28
<p>Некоторые примеры, чтобы вам было проще разобраться:</p>
28
<p>Некоторые примеры, чтобы вам было проще разобраться:</p>
29
<p>•<a>Раз</a></p>
29
<p>•<a>Раз</a></p>
30
<p>•<a>Два</a></p>
30
<p>•<a>Два</a></p>
31
<p>•<a>Три</a></p>
31
<p>•<a>Три</a></p>