CSS scrollbar style

Вывод

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

От автора: если вам нужна стилизация полосы прокрутки CSS прямо сейчас, одним из вариантов является использование набора свойств с префиксом ::webkit.

К сожалению, это не очень помогает в Firefox или Edge, или родственной экосистеме браузеров.

Но если этого достаточно для того, что вам нужно, вы можете сделать это довольно стильно:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

На CodePen есть множество примеров. Также неплохо абстрагироваться с помощью Sass@mixin.

На этом фронте есть хорошие новости! Основы стандартов, которые должны воплотиться в методы стандартизации для стилей полос прокрутки, уже начали реализоваться с желобов (или ширины). Главное свойство будет scrollbar-gutter, и Джефф описал его . Надеюсь, Autoprefixer поможет нам, когда спецификация будет завершена, и браузеры начнут ее реализовывать, чтобы мы могли писать стандартизированную версию и получать из нее любые префиксные версии.

Но что, если нам понадобится кросс-браузерная поддержка? Если вам нужны стильные полосы прокрутки (и я вас понимаю), то вам, вероятно, придется искать JavaScript решение. Для этого должны быть десятки библиотек. Я наткнулся на simplebar, и она выглядит как довольно современная. Вот ее демонстрация:

Вот еще одна простая полоса прокрутки:

Дас Шурма написал очень интересное руководство, в нем создается собственная полоса прокрутки, которая на самом деле при прокрутке не требует JavaScript (хорошо для перфорирования), но требует установки некоторого кода JavaScript.

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

Я вставлю экземпляр здесь:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *