jQuery прокрутка (страниц, div блоков, горизонтальная и вертикальная)

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

Давайте посмотрим как это работает на деле.
Сначала интегрируем стили и библиотеки со скриптами:

Код:

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<script src="jquery.mousewheel.min.js" type="text/javascript"></script>

Теперь давайте займемся построением HTML структуры для этого плагина прокрутки:

Код:

<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
<p>Содержание блока</p></div>
</div>
<div class="dragger_container"></div>
</div>
<!--  Кнопки скроулинга  -->
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a>
</div>
</div></div>
Теперь добавим еще несколько строк в CSS правило для тех у кого отключен javascript:
<noscript>
	<style type="text/css">
		#mcs_container .customScrollBox{overflow:auto;}
		#mcs_container .dragger_container{display:none;}
	</style>
</noscript>
 
Последним шагом является запуск скрипта и интеграция дополнительной библиотеки для прокрутки в конце документа:
<script>
$(window).load(function() {
	$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});
</script>
<script src="jquery.mCustomScrollbar.js" type="text/javascript"></script>

Так же вы можете настроить плагин так как вам хочется, используя набор возможностей передаваемые функцией mCustomScrollbar:

1. Первым идет параметр определяющий ориентацию прокрутки – вертикальная или горизонтальная (“vertical”, “horizontal”)
2. Так же можно задать цифру ослабления прокрутки
3. Тип прокрутки
4. Дополнительное пространство для прокрутки (только для вертикальной прокрутки)
5. Установить высоту и ширину пространства для ползунка прокрутки (по-умолчанию auto – равен размеру блока)
6. Поддерживать прокрутку колесиком мышки (“yes” или “no”)
7. Поддерживать прокрутку кнопками клавиатуры (“yes” или “no”)
8. Скорость прокрутки кнопками клавиатуры от 1 до 20

Пример скачать можно тут