Кастомизация скроллбара div в CSS без влияния на страницу

Быстрый ответ

Для кастомизации скроллбара в div используйте псевдоэлементы ::-webkit-scrollbar и связанные с ними в CSS. Этот метод хорошо работает в браузерах на Webkit. Вот наглядный пример кода:

/* Устанавливаем размеры и цвет фона для скроллбара */
div::-webkit-scrollbar {
  width: 10px;
}

/* Стилизуем ползунок скроллбара */
div::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}

/* Стили для ползунка при наведении курсора */
div::-webkit-scrollbar-thumb:hover {
  background: #555; /* Темный оттенок выглядит более стильно */
}

Проверьте, что содержимое, вызывающее появление скроллбара, находится в div:

<div style="height: 200px; overflow-y: auto;">
  <!-- Здесь может быть большое количество содержимого -->
</div>

Процесс кастомизации несложен и быстр, но для поддержания работы в различных браузерах вам может понадобиться дополнительное стилизование CSS.

Совместимость с разными браузерами и методы

::-webkit-scrollbar работает прекрасно в Chrome, Safari и новых версиях Edge. А что делать с Firefox или IE?

Firefox

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

/* Стили для скроллбара в Firefox */
div {
  scrollbar-color: darkgrey lightgrey;
  scrollbar-width: thin;
}

Подробнее об этом расскажет наш спикер на видео

Internet Explorer

Майкрософт с IE8 внедрила свои свойства для скроллбаров, но их эффективность угасла в эпоху современных веб-стандартов.

JavaScript-решение

Для обеспечения единообразия скроллбаров во всех браузерах подойдут библиотеки JavaScript, например, "niceScroll".

$(document).ready(function() {  
  $("div").niceScroll({
    cursorcolor: "#888",
    cursorwidth: "10px",
    cursorborder: "1px solid #555",
    cursorborderradius: "5px"
  });
}); /* украшаем кастомные скроллбары "духом самурая" */

Этот скрипт вставляется внутри тега <script> после загрузки содержимого страницы. "niceScroll" кастомизирует скроллбар именно в вашем div, не влияя при этом на прокрутку всей страницы.

Визуализация

Представьте обычное песочное печенье и праздничного пряничного человечка. Ваш div со стандартным скроллбаром – это песочное печенье: просто и функционально, но ничем не примечательно.

Стандартный скроллбар:
|---------------------|
| 🖼 🖌 🎨              | <-- Функционально, но без изыска.
|---------------------|

Но когда вы начинаете применять CSS, он преображается в пряничного человечка – это привлекательный и праздничный элемент.

Пользовательский скроллбар:
|---------------------|
| 🖼 🖌 🎨              | <-- Визуальное удовольствие, напоминающее праздник!
|[🎨][🌈][🖌]         |
|---------------------|

CSS помогает превратить скроллбар в заметный и практичный элемент интерфейса.

Гибкие дизайны с помощью CSS

Применение linear-gradient, box-shadow и border-image может придать вашему скроллбару стильности:

/* Градиент для трека скроллбара */
div::-webkit-scrollbar-track {
  background: linear-gradient(90deg, rgba(0,0,0,.2), rgba(0,0,0,0));
}

/* Стилизация ползунка с тенями и плавными переходами */
div::-webkit-scrollbar-thumb {
  background-color: #999;
  box-shadow: inset 0 0 10px #000000;
  transition: background-color 0.3s ease;
}

Эффекты при наведении курсора усиливают интерактивность интерфейса.

Готовьтесь к нюансам

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

Следите за производительностью

Хоть кастомные скроллбары и выглядят привлекательно, они не должны замедлять работу страницы. Умеренное использование JavaScript-библиотек поможет не нарушить производительность вашего сайта.

Полезные материалы

1. Стилизация скроллбаров | WebKit — подробное руководство по стилизации скроллбаров для WebKit.
2. Αταλίζация скроллбаров в CSS | MDN — сжатый гайд от MDN по кастомизации скроллбаров с помощью CSS.
3. Скроллбары в CSS | CSS-Tricks — все о стилизации скроллбаров.
4. Пользовательский скроллбар | W3Schools — пошаговое руководство W3Schools по созданию кастомных скроллбаров.
5. Стилизация скроллбара в CSS | Can I use — информация о поддержке стилизации скроллбаров CSS в различных браузерах.
6. Креативные скроллбары | CodePen — вдохновляющие примеры дизайна скроллбаров.
7. Скрытие скроллбара с сохранением функции прокрутки | Stack Overflow — обсуждение кастомных скроллбаров в div на форуме Stack Overflow.