DevGang
Авторизоваться

CSS-полоса прокрутки с индикатором прогресса 

Полосы прокрутки являются естественными индикаторами прогресса. Насколько полоса прокручена вниз или в сторону - это прогресс, достигнутый при прокрутке этого элемента (часто всей страницы). Но они больше похожи на индикаторы прогресса, чем на метры, если вы думаете о метре как о чем-то, что «заполняется» на ходу.

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

Это будет работать только со свойствами -webkit- стиля полосы прокрутки с префиксом поставщика. Другими словами, это нестандартно. Стандартизированные свойства стиля полосы прокрутки - scrollbar-width и scrollbar-color, которые не могут справиться с подобными вещами, но, вероятно, являются более безопасным выбором в долгосрочной перспективе. Тем не менее, версии с префиксом производителя, вероятно, никуда не денутся, поэтому, если вы считаете это странной формой прогрессивного улучшения, это, вероятно, хорошо.

Вчем прикол?

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

:root {
  --shadow: #43a047;
  --scrollbarBG: #eee;
  --thumbBG: #66bb6a;
}
::-webkit-scrollbar {
  width: 16px;
}
::-webkit-scrollbar-track {
  background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
  background-color: var(--thumbBG);
  box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;
}

Демо

Я впервые увидел это в Pen by Myk .

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

Могу ли я действительно использовать это?

Нет! Помимо того, что это супер странно и нестандартно. Safari переворачивает крышку, и я понятия не имею, как это исправить.

Источник:

#CSS
Комментарии
Чтобы оставить комментарий, необходимо авторизоваться

Присоединяйся в тусовку

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

Попробовать

Оплатив хостинг 25$ в подарок вы получите 100$ на счет

Получить