Как добавить полосу прокрутки

Руководство по стилизации полосы прокрутки в CSS

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

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

Знакомство с полосой прокрутки

Полоса прокрутки — это часто упускаемый из виду элемент веб-дизайна. Хотя она может показаться незначительной деталью, она играет важную роль в навигации сайта. Стандартная полоса прокрутки часто бывает скучной и может выглядеть неуместно, нарушая общую эстетику. К счастью, вы можете легко настроить полосу прокрутки с помощью CSS. Для этого потребуется написать два набора правил CSS для браузеров Webkit, таких, как Chrome, Edge, Safari и Firefox.

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

• Бегунок: Подвижная часть полосы прокрутки, которая представляет текущую позицию содержимого. Его можно нажать и перетащить для прокрутки содержимого вверх или вниз.
• Дорожка: Область полосы прокрутки, по которой перемещается бегунок. Она представляет собой всю длину содержимого.
• Кнопки со стрелками: Расположенные в верхней и нижней части дорожки полосы прокрутки, кнопки со стрелками можно нажимать для прокрутки содержимого.
• Границы полосы прокрутки: Линии, которые окружают элемент полосы прокрутки.
• Угол полосы прокрутки: Пересечение между вертикальной и горизонтальной полосами прокрутки, когда обе присутствуют.

Стилизация полос прокрутки в Chrome, Edge и Safari

Браузеры Webkit позволяют настраивать полосу прокрутки с помощью псевдоэлементов ::-webkit-scrollbar , ::-webkit-scrollbar-button , ::-webkit-scrollbar-thumb , ::-webkit-scrollbar-track и других. Каждый из них нацелен на различные части полосы прокрутки, как указано выше. В CodePen ниже показан пример стилизованной полосы прокрутки с использованием вышеуказанных псевдоэлементов:

В приведённом выше коде мы отобразили вертикальную и горизонтальную полосы прокрутки, но в большинстве случаев мы отобразили бы только одну. Для этого мы можем изменить свойство overflow , которое отвечает за видимость полосы прокрутки, на overflow-x или overflow-y , в зависимости от того, по какой оси мы будем отображать полосу прокрутки. Однако для приведённого выше примера этого будет недостаточно, если мы не сделаем изображение отзывчивым, установив его ширину и высоту на 100% .

Селекторы псевдокласса полосы прокрутки

Чтобы создать более индивидуальный дизайн, вы можете выбрать определённые элементы полосы прокрутки и применить к ним стили, добавив псевдокласс к каждому псевдоэлементу. Ниже приведены некоторые из наиболее распространённых псевдоклассов:

• :horizontal : Используется для придания горизонтальной полосе прокрутки стиля, отличного от вертикальной полосы прокрутки. Например, вы можете задать другую ширину или цвет для горизонтальной полосы прокрутки.
• :vertical : Используется для стилизации в CSS вертикальной полосы прокрутки, отличной от горизонтальной полосы прокрутки.
• :decrement : Применяется к кнопкам со стрелками в начале полосы прокрутки. Используется для стилизации кнопки уменьшения или стрелки вверх для вертикальной полосы прокрутки и стрелки влево для горизонтальной полосы прокрутки.
• :increment : Применяется к кнопке со стрелкой в конце полосы прокрутки. Используется для стилизации кнопки увеличения или стрелки вниз для вертикальной полосы прокрутки и стрелки вправо для горизонтальной полосы прокрутки.
• :start : Применяется к первым кнопкам и первому фрагменту дорожки полосы прокрутки, которые находятся в верхней или левой части вертикальной или горизонтальной полосы прокрутки соответственно
• :end : Применяется к последнему фрагменту дорожки полосы прокрутки, которые находятся внизу или справа вертикальной, или горизонтальной полосы прокрутки, соответственно.

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

В примере ниже используется псевдокласс :horizontal для вставки тени на дорожку горизонтальной полосы прокрутки:

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

Стилизация полос прокрутки в Firefox

Firefox не предлагает никаких продвинутых методов стилизации, как браузеры Webkit. На момент написания статьи доступны только свойства scrollbar-width и scrollbar-color , что является стандартом, определённым W3C CSS Scrollbars. Эти свойства можно использовать для стилизации ширины полосы прокрутки, бегунка и цвета дорожки:

body  
scrollbar-width: thin; 
scrollbar-color: #4d7fff #ddd; 
>

Стилизация полос прокрутки для большей поддержки кроссбраузерности

При оформлении полосы прокрутки рекомендуется комбинировать спецификации Webkit и W3C CSS Scrollbars, чтобы охватить большее количество браузеров:

body  
scrollbar-width: thin; 
scrollbar-color: #4d7fff #ddd; 
> 
 
body::-webkit-scrollbar  
width: 10px; 
height: 10px; 
> 
 
body::-webkit-scrollbar-thumb  
background: linear-gradient(to bottom right, #4d7fff 0%, #1a56ff 100%); 
border-radius: 5px; 
> 
 
body::-webkit-scrollbar-track  
background-color: #ddd; 
border: 1px solid #ccc; 
> 
 
body::-webkit-scrollbar-button  
background-color: #4d7fff; 
border-radius: 5px; 
>

В браузерах WebKit правила, которые не распознаны, будут проигнорированы, и браузеры будут применять правила -webkit-scrollbar . С другой стороны, в браузерах Firefox правила, которые не распознаются, также будут игнорироваться, и браузеры будут применять правила CSS правила полос прокрутки. Таким образом, полоса прокрутки сохранит свой стиль в большем количестве браузеров. Хотя недостатком является то, что в Firebox нет продвинутых методов стилизации, как в Webkit, вы сможете придать полосам прокрутки одинаковый вид.

Заключение

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

overflow

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

Синтаксис

overflow: auto | hidden | scroll | visible | inherit

Значения

visible Отображается все содержание элемента, даже за пределами установленной высоты и ширины. hidden Отображается только область внутри элемента, остальное будет скрыто. scroll Всегда добавляются полосы прокрутки. auto Полосы прокрутки добавляются только при необходимости. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Duis te feugifacilisi 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.





 
  

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства overflow

Объектная модель

[window.]document.getElementById(» elementID «).style.overflow

Браузеры

Internet Explorer до версии 7.0 включительно:

• не поддерживает значение inherit ;
• относительно позиционированные дочерние элементы, значения overflow у которых заданы как auto или scroll ведут себя словно у них задано position : fixed .

Internet Explorer 8:

• Сочетание overflow со значением scroll со свойствами max-height и float может привести к пропаданию элементов веб-страницы, в браузере выводится пустой экран.
• Для блока, у которого указаны свойства float и overflow со значением scroll , игнорируется ширина, заданная через свойство max-width .
• Высота блока с горизонтальной полосой прокрутки увеличивается на высоту скролбара, хотя по спецификации CSS заданные размеры должны включать в себя и полосы прокрутки.

Показывать полосы прокрутки в Word или Excel

Excel для Microsoft 365 Word для Microsoft 365 Excel для Microsoft 365 для Mac Word для Microsoft 365 для Mac Excel 2021 Word 2021 Excel 2021 для Mac Word 2021 для Mac Excel 2019 Word 2019 Excel 2019 для Mac Word 2019 для Mac Excel 2016 Word 2016 Excel 2016 для Mac Word 2016 для Mac Excel 2013 Word 2013 Еще. Меньше

Показывать полосы прокрутки в Word и Excel для Windows

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

1. Выберите Файл >Параметры.
2. На вкладке Дополнительные прокрутите экран до раздела Экран.
3. Выберите Показать горизонтальную полосу прокрутки и Показать вертикальную полосу прокрутки, а затем нажмите кнопку ОК.

Автоматическое скрытие полос прокрутки в Windows 10

Полосы прокрутки могут быть настроены на автоматическое скрытие себя. Вы можете отключить этот параметр.

1. Нажмите кнопку>Параметры.
2. В Windows Параметрывниз прокрутите список вниз и нажмите кнопку Удобство доступа >экран.
3. Прокрутите страницу вниз и установите для Windows автоматическое скрытие полос прокрутки .

Восстановление окна приложения

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

1. Щелкните правой кнопкой мыши заголовок окна приложения и выберите развернуть.
2. Снова щелкните заголовок заголовка правой кнопкой мыши и выберите восстановить.

Показывать полосы прокрутки в Word и Excel для Mac

Сначала установите параметры прокрутки Системные настройки.

1. В меню Apple выберите пункт Системные настройки.
2. Выберите категорию Общие.
3. В области Показать полосыпрокрутки выберите Всегда, а затем закройте диалоговое окно.

Проверка параметров представления

Если изменение системных параметров не работает, проверьте параметры представления в Word или Excel.

1. В заголовке в Word или Excel выберите Word или Excel.
2. Нажмите кнопку Параметрыи выберите вид.
3. Выберите Горизонтальная полоса прокрутки и Вертикальная полоса прокрутки, а затем закройте диалоговое окно.

Восстановление окна приложения

Если полосы прокрутки по-прежнему не отображаются, попробуйте восстановить и размер окна приложения.

1. Щелкните зеленый значок полноэкранного режиме в левом верхнем конце окна приложения.
2. Переместите указатель мыши в верхнюю часть экрана и снова нажмите зеленую кнопку или нажмите клавиши COMMAND+CONTROL+F.

Как стилизовать или убрать полосу прокрутки — 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, имеющий полосу прокрутки, чтобы применить на него наши стили.

HTML         
   

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; } 

Ширина полосы в 7 пикселей

Мы уже знаем, что скроллбар состоит из полосы, кнопки и индикатора прокрутки. Используем псевдо элемент ::-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
Пример 2
Пример 3
Пример 4

Пример 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); }