Доброго времени суток. 🙂
Сегодня имею большое желание написать вам статью от ом как заменить стандартную полосу прокрутки на сайте на более стилизованную. Иногда так бывает что заменить скроллбар просто необходимо для определенного завершения дизайна страницы. Если вы занимаетесь версткой и часто верстаете лендинги, то такой шаг в сторону улучшения внешнего вида страницы, может вам отлично помочь.
Стандартная полоса прокрутки в принципе ничем не мешает, но тем неимение ее можно немного доработать. тот способ что я покажу может не только изменить прокрутку, но и придать ей определенную анимацию, замедлить скроллинг и тд. Так же данная прокрутка может иметь любой внешний вид, у нее имеется много стилей и при желании сможете все их опробовать, но об этом позже. То что получится в итоге можно посмотреть по ссылке ниже.
Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует jQuery, нужна эта самая библиотека jQuery. Ее нужно подключить к сайту. Если библиотека была ранее подключена на сайте, то этот шаг можно пропустить, если нет, то нужно ознакомится с статьей Как и где подключить скрипт?. Строка с ссылкой на библиотеку:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Далее вам понадобится подключить сам скрипт. Его вы можете взять из архива который скачаете по ссылке выше. Файл со скриптом называется custom_scrollbar.min.js. В статье что я рекомендовал есть примеры, как подключать файлы со скриптами. делать это следует после библиотеки.
Чтобы запустить наш скрипт и параллельно задать настройки прокрутке, нужно добавить еще один небольшой скрипт:
<script>
$(window).load(function(){
$("body").mCustomScrollbar({
theme:"dark-3"
});
});
</script>
В данном примере есть только одна настройка - указана тема оформления dark-3. Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.
Помимо тем оформления, у скрипта есть еще много настроек. Тут расскажу еще об одной, которая понадобится многим и чтобы не отвечать каждому в комментариях, напишу здесь.
Есть такой параметр как scrollInertia. Он задает скорость анимации прокрутки. В примере, что был вверху статьи, при прокрутке ощущается задержка, плавность. Это сделано для придания необычности рядовой полосе прокрутки. В примере установлено значение 3000. В итоге, код будет таким:
<script>
$(window).load(function(){
$("body").mCustomScrollbar({
theme:"dark-3",
scrollInertia:3000
});
});
</script>
Как видите, просто через запятую добавили и все. Если вы опытный верстальщик и хотите узнать про еще больше возможностей, то можно прочитать о них на сайте разработчика - http://manos.malihu.gr/jquery-custom-content-scroller/
Чтобы все темы оформления и вообще полоса прокрутки отображалась правильно нужно подключать стили CSS. Если вы не особо хотите заморачиваться, то просто подключайте файл стилей, что так же лежит в скачанном вами архиве и называется - custom_scrollbar.css. Если же заморочится, то из него можно взять только основные моменты. Общие стили и стили определенной темы оформления. остальное попросту не подключать, ведь это лишние строки кода и просто так, сайту они не нужны.
Так же у вас на сайте должны будут установлены определенные стили. Чаще всего они и так будут установлены, но вдруг это не так, то добавьте их себе.
body{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
Если все сделано правильно и ваша страница на сайте имеет большую высоту, чтобы появилась прокрутка, то все должно работать. Теперь можете применять ее на своих проектах и радовать себя и заказчиков необычным решением.
На этом все, спасибо за внимание. 🙂