LabEx
ВходРегистрация

Настройка стилей полосы прокрутки с использованием CSS

Beginner

This tutorial is from open-source community. Access the source code

Введение

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

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

Собственная полоса прокрутки

В ВМ уже предоставлены index.html и style.css.

Для настройки стиля полосы прокрутки для элементов с прокручиваемым переполнением вы можете использовать ::-webkit-scrollbar для стилизации элемента полосы прокрутки, ::-webkit-scrollbar-track для стилизации дорожки полосы прокрутки (фон полосы прокрутки) и ::-webkit-scrollbar-thumb для стилизации ползунка полосы прокрутки (двигаемый элемент). Однако обратите внимание, что этот метод работает только в браузерах на основе WebKit, и стилизация полосы прокрутки не находится на любом стандарте. Вот пример использования этих селекторов в HTML и CSS:

<div class="custom-scrollbar">
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.<br />
    Iure id exercitationem nulla qui repellat laborum vitae, <br />
    molestias tempora velit natus. Quas, assumenda nisi. <br />
    Quisquam enim qui iure, consequatur velit sit?
  </p>
</div>

.custom-scrollbar {
  height: 70px;
  overflow-y: scroll;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1e3f20;
  border-radius: 12px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4a7856;
  border-radius: 12px;
}

Пожалуйста, нажмите кнопку "Go Live" в нижнем правом углу, чтобы запустить веб-сервис на порту 8080. Затем вы можете обновить вкладку Web 8080, чтобы просмотреть веб-страницу.

Резюме

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