984 Вы, возможно, уже занимались вопросами плавной прокрутки Ваших страниц. Тогда же и создавалась стандартная полоса прокрутки. Однако её дизайн можно изменить. И тогда Ваша страница сможет похвастаться и приятной прокруткой и красивой полосой прокрутки. В первую очередь нужно реализовать на сайте плавную прокрутку, а уже затем приступать к оформлению полосы прокрутки.
Как изменить дизайн полосы прокрутки на сайте
Плагин, использующийся для создания плавной прокрутки сайта, содержит в себе также большое количество вариантов оформления полосы прокрутки. Поэтому изменить дизайн полосы будет очень и очень легко — мы просто изменим тему оформления полосы, используя все тот же плагин.
Только после успешной установки плавной прокрутки на Вашей странице, можно переходить к выбору темы, в противном случае ничего не выйдет. В конце тела файла необходимо найти следующий фрагмент кода:
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> (function($){ $(window).load(function(){ $("body").mCustomScrollbar({ theme:"dark-thin" }); }); })(jQuery); </script> |
Как изменить тему полосы прокрутки?
В этом фрагменте нас интересует значение параметра theme. По умолчанию оно равно dark-thin. Это и есть имя темы оформления. Меняя это значение, мы будем изменять и дизайн полосы. Как видите, все предельно просто. Полный список имен тем можно найти в файле jquery.mCustomScrollbar.css или далее:
- light
- dark
- light-2
- dark-2
- light-thick
- dark-thick
- light-thin
- dark-thin
- rounded
- rounded-dark
- rounded-dots
- rounded-dots-dark
- 3d
- 3d-dark
- 3d-thick
- 3d-thick-dark
- minimal
- minimal-dark
- light-3
- dark-3
- inset
- inset-dark
- inset-2
- inset-2-dark
- inset-3
- inset-3-dark
Если Ваш сайт оформлен в темных тонах — используйте темы, начинающиеся со слова light, а если в светлых — со слова dark. Обратите внимание, что изменять необходимо только название темы в одном фрагменте кода, указанном выше.
Вы можете выбирать наиболее подходящую для вашего дизайна тему оформления полосы прокрутки.
