История создания пользовательской полосы прокрутки с помощью CSS

Полоса прокрутки полезна и очевидна, когда содержимое веб-страницы выходит за пределы видимых областей. Внешний вид и ощущение полосы прокрутки зависят от реализации браузера. Внешний вид полосы прокрутки различается в Google Chrome, Firefox и Safari. В большинстве случаев стандартный вид не слишком привлекателен.

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

Сначала HTML-часть. Давайте создадим абзац с произвольным текстом и заключим его в элемент div. Мы добавим класс к элементу div, чтобы можно было добавлять к нему стили.

<div class="scroll-demo">
  <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Pellentesque ullamcorper diam ac nisl porttitor, non porttitor 
sapien vehicula. Cras vel scelerisque arcu. Cras nec sodales sem. 
Aenean viverra semper augue, eu pellentesque lacus laoreet et. 
In porttitor quam et turpis facilisis aliquet. Morbi in urna vel tortor 
finibus maximus in ut augue. Sed posuere semper condimentum. 
Quisque lacinia ut sem eget egestas. Donec risus est, porttitor 
vitae mauris quis, pretium tincidunt ex. Suspendisse est libero, 
fringilla in aliquet ut, faucibus quis nibh. Sed eget ex eu orci ullamcorper 
molestie. Aenean pharetra quis neque non imperdiet. Mauris euismod 
mattis sapien, id gravida nunc pulvinar ut. Vestibulum diam augue, egestas 
ut odio ut, placerat molestie metus.
  </p>
</div>  
Вход в полноэкранный режим Выход из полноэкранного режима

Далее давайте применим некоторые стили к элементу div так, чтобы у нас появилась полоса прокрутки. Мы задали ей сравнительно меньшую ширину, а атрибут overflow установили как auto, чтобы появилась полоса прокрутки.

.scroll-demo {
  width: 300px;
  height: 200px;
  overflow: auto;
  padding: 5px;
  border: 1px solid #ebebeb;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Отлично!!! На данном этапе, если мы отобразим div в веб-браузере, он будет выглядеть следующим образом:


Рендеринг в Google Chrome

Хотя полоса прокрутки может показаться простым элементом управления, вы будете удивлены, узнав, что у нее есть несколько важных частей. Мы должны знать об этих частях, чтобы лучше их настроить. Давайте рассмотрим различные части полосы прокрутки и узнаем, для какой цели служит каждая из них.

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

::-webkit-scrollbar              
::-webkit-scrollbar-button 
::-webkit-scrollbar-track   
::-webkit-scrollbar-track-piece  
::-webkit-scrollbar-thumb  
::-webkit-scrollbar-corner  
::-webkit-resizer       
Вход в полноэкранный режим Выход из полноэкранного режима

Обратите внимание, что эти псевдоэлементы CSS не включены в стандарт для реализации всеми браузерами. Вот почему эти псевдоэлементы работают в chrome, safari, edge и opera, но пока не работают в Firefox. Не волнуйтесь. У нас есть несколько альтернатив для Firefox, и мы увидим это через некоторое время.

Теперь давайте зададим ширину нашей полосы прокрутки и фон для ее дорожки. Мы определили их с помощью псевдоэлементов ::-webkit-scrollbar и ::-webkit-scrollbar-track.

.scroll-demo::-webkit-scrollbar {
  width: 10px;
}

.scroll-demo::-webkit-scrollbar-track {
  box-shadow: inset 0 0 10px #143d59;
  border-radius: 50px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

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

Теперь мы хотим стилизовать большой палец прокрутки. Давайте применим к нему цвет фона и значение border-radius. Мы сделаем это с помощью псевдоэлемента ::-webkit-scrollbar-thumb.

.scroll-demo::-webkit-scrollbar-thumb {
  background: #ffd55a;
  border-radius: 50px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Взгляните! Теперь цвет большого пальца также изменен.

Как насчет изменения цвета большого пальца при наведении? Ну, это просто. Мы можем использовать :hover для применения цвета.

.scroll-demo::-webkit-scrollbar-thumb:hover {
  background: #64dd17;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Итак, когда мы наводим курсор на scroll-thumb, цвет меняется соответствующим образом.

Пришло время настроить верхнюю и нижнюю кнопки прокрутки. Для этого воспользуемся псевдоэлементом ::-webkit-scrollbar-button. Здесь мы применим черный цвет с границей-радиусом к обеим кнопкам прокрутки.

.scroll-demo::-webkit-scrollbar-button {
  background: black;
  border-radius: 10px;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Изменения применены, и весь вид полосы прокрутки изменен на пользовательский.

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

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

Пользовательская полоса прокрутки и Firefox

На данный момент ни один из псевдоэлементов не работает в Firefox. Однако вы можете использовать элементы стиля scrollbar-color и scrollbar-width для настройки полосы прокрутки в Firefox.

.scroll-demo {
  width: 300px;
  height: 200px;
  overflow: auto;
  padding: 5px;
  border: 1px solid #ebebeb;

  /* below styles are for Firefox */
  scrollbar-color: #ffd55a #143d59;
  scrollbar-width: auto;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Для scrollbar-color первый цвет применяется к большому пальцу полосы прокрутки, второй — к дорожке полосы прокрутки. Значение scrollbar-width может иметь значения auto, thin или none. Вот как выглядит полоса прокрутки после применения вышеуказанных стилей:

Кодексы для изучения

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

Вот еще один Codepen, который я создал с более упорядоченным кодом. Вы можете посмотреть его в качестве ссылки.

На этом пока все. Надеюсь, эта статья была для вас полезной и помогла узнать что-то новое. Иллюстрация с ребенком и собакой на обложке была взята для бесплатного скачивания с clipartmax.


Я делюсь своими знаниями на,

  • 🌐 Веб-разработка (JavaScript, ReactJS, Next.js, Node.js, и так далее…)
  • 🛡️ Веб-безопасность
  • 💼 Карьерный рост
  • 🌱 Opensource
  • ✍️ Создание контента

Давайте общаться,

  • Следите за мной в Twitter
  • Подписывайтесь на мой канал YouTube
  • Побочные проекты на GitHub
  • Сообщество Showwcase

Оцените статью
Procodings.ru
Добавить комментарий