Загадка Жака Фреско: чем является сколлбар?

Нагружу вас информацией, пока вы еще не заскучали 😋.

Скроллбар является частью пользовательского интерфейса, но не принадлежит семье HTML элементов. Скроллбар рендерится браузерами по их собственным алгоритмам. Они также не являются частью DOM (Объектной модели документа), поэтому к ним нельзя обращаться через JavaScript и манипулировать их внутренним состоянием.

Желаемый результат

Наша задача превратить это:

... в это:

Webkit селекторы

Единственный способ стилизовать скроллбар это использовать Webkit селекторы.

::-webkit-scrollbar

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

::-webkit-scrollbar-thumb

Это ползунок. Обычно ему можно указать цвет заднего фона, скругление, более темный/светлый цвет при наведении.

::-webkit-scrollbar-track

Задний фон скроллбара. Можно сделать его прозрачным или добавить контрастный цвет (в противовес ползунку), а также добавить скругление от родительского элемента, если цвет непрозрачный.

Пишем CSS

Но давайте не будем выливать помои, не подготовив чистой воды. Для начала создадим тестовый блок с вертикальной прокруткой:

<div class="m-16 flex max-h-[12rem] overflow-auto rounded-xl bg-gray-100 p-8 text-gray-600 shadow-xl shadow-purple-400/50">
	Lorem ipsum dolor sit amet consectetur...
	<!-- Очень много мокап текста... -->
</div>

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
	@apply bg-purple-300;
}

А вот и долгожданный момент, теперь стилизуем скроллбар селекторами Webkit'а:

@tailwind base;
@tailwind components;
@tailwind utilities;

html {
	@apply bg-purple-300;
}
/* Не пугайтесь, скролл не станет квадратным. */
/* Вертикальный скролл сузится до 6 пунктов вширь, а горизонтальный - ввысь. */
::-webkit-scrollbar {
	@apply h-6 w-6;
}
/* Используем border, чтобы добавить отступ для ползунка. */
::-webkit-scrollbar-thumb {
	@apply rounded-full border-[0.5rem] border-solid border-transparent bg-gray-300 bg-clip-padding;
}
/* Уголок, в котором соединяются вертикальный и горизонтальный скроллбар лучше сделать прозрачным. */
::-webkit-scrollbar-corner {
	@apply bg-transparent;
}
/* Фону скроллбара можно указать цвет и скругления. */
/* В случае этого скроллбара скруглить надо только правую сторону. */
::-webkit-scrollbar-track {
	@apply rounded-r-[inherit] bg-transparent;
}

Применив эти стили, мы получаем следующий результат 😏:

Поддержка

Firefox

Если вы пользуетесь Firefox, то знайте, что этот браузер не поддерживает стилизованные сколлбары из-за того, что работает не на Webkit (Браузерный движок от Apple), а на собственном движке Gecko 😞. Насколько я знаю, Firefox не собирается переходить на Webkit, потому что это во-первых ресурсозатратно, а во-вторых может повлечь некоторые юридические трудности из-за разногласия в лицензиях. Однако, это не значит, что в Firefox страница сломается и скроллбары потому стилизовать нельзя. Как разработчик знайте, что ничего не сломается, они просто будут выглядеть по-стандартному.

Проблемы

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

• нельзя анимировать ни одну из частей скроллбара, также нельзя добавить duration и transition;
• нельзя ставить минимальную высоту и длину ползунка, чтобы его не плющило, когда контента слишком много.

Больше примеров

• Брутальный скроллбар:

  

• Цветной скроллбар:

  

• Скроллбар для темной темы: