Стандартная полоса прокрутки в принципе ничем не мешает, но тем неимение ее можно немного доработать. тот способ что я покажу может не только изменить прокрутку, но и придать ей определенную анимацию, замедлить скроллинг и тд. Так же данная прокрутка может иметь любой внешний вид, у нее имеется много стилей и при желании сможете все их опробовать, но об этом позже. То что получится в итоге можно посмотреть по ссылке ниже.
Приступим до воплощения такой доработки. Так как наш скрипт полосы прокрутки использует jQuery, нужна эта самая библиотека jQuery. Ее нужно подключить к сайту. Если библиотека была ранее подключена на сайте, то этот шаг можно пропустить, если нет, то нужно ознакомится с статьей Как и где подключить скрипт?. Строка с ссылкой на библиотеку:
<script src="http://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. Тем у данной прокрутки много. Можете указать любую. Все их можно взять из списка ниже или из файла стилей, об этом позже. В общем, просто копируете название и добавляете в скрипт выше.
- 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
Помимо тем оформления, у скрипта есть еще много настроек. Тут расскажу еще об одной, которая понадобится многим и чтобы не отвечать каждому в комментариях, напишу здесь.
Есть такой параметр как 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%;
}
Если все сделано правильно и ваша страница на сайте имеет большую высоту, чтобы появилась прокрутка, то все должно работать. Теперь можете применять ее на своих проектах и радовать себя и заказчиков необычным решением.
На этом все, спасибо за внимание. 🙂
