ZorNet.Ru — сайт для вебмастера » HTML и CSS » Красивое оформление скроллбара с помощью CSS

Красивое оформление скроллбара с помощью CSS

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

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

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

Простой стиль

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

CSS

Код

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

::-webkit-scrollbar-track {
  background: #f7efef;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #a5a2a2;
  border-radius: 5px;
}

Градиентный стиль

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

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

CSS

Код

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

::-webkit-scrollbar-track {
  background: #f3f0f0;
  border-radius: 5px;
  box-shadow: inset 0 0 6px rgba(23, 22, 22, 0.22);
}

::-webkit-scrollbar-thumb {
  background: #a0c8d8;
  background: -moz-linear-gradient(left, #a4c3d0 0%, #28a3ca 50%, #b2d2de 100%);
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, #accfde), color-stop(50%, #2caad2), color-stop(100%, #bce0ee));
  background: -webkit-linear-gradient(left, #a3bfcc 0%, #29b8e5 50%, #b1d3e0 100%);
  background: -o-linear-gradient(left, #9ebecc 0%, #29b8e5 50%, #a0c5d4 100%);
  background: -ms-linear-gradient(left, #9dc1d0 0%, #29b8e5 50%, #aed2e0 100%);
  background: linear-gradient(to right, #a6c9d8 0%, #29b8e5 50%, #b2d2de 100%);
  border-radius: 5px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3dced', endColorstr='#bce0ee', GradientType=1);
}

Индивидуальные элементы

Как сделать красивую полосу прокрутки на вашем сайте

Вам нужны полосы прокрутки только для отдельных элементов, что в некоторых ситуациях, когда это выглядело бы великолепно, это pre элементы, так же table-responsive класс или что-либо с горизонтальным или вертикальным переполнением.

Вот пример использования pre элемента, здесь измените размер браузера, чтобы увидеть полосы прокрутки.

Код

pre::-webkit-scrollbar {
  height: 14px;
  width: 14px;

  -webkit-appearance: none;
}

pre::-webkit-scrollbar-thumb {
  background-color: rgba(47, 46, 46, 0.2);
  border: 3px solid #fbf6f6;
  border-radius: 8px;
}

Одна удивительная вещь в этой полосе прокрутки: они могут быть представлены в разных стилях для разных HTML-элементов на одной веб-странице. Сегодня мы увидим реализацию такой полосы прокрутки для браузеров, поддерживаемых Webkit.

Сначала мы рассмотрим основные свойства CSS прокрутки:

::-webkit-scrollbar
::-webkit-scrollbar-thumb
::-webkit-scrollbar-track
::-webkit-scrollbar-button
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-corner
::-webkit-resizer

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

02 Августа 2018 Просмотров: 5036 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0