Для прокрутки содержания плагин использиет JQuery UI и он полностью настраивается с помощью CSS. Плагин оснащен поддержкой вертикальной / горизонтальной прокрутки колесом мыши.
Посмотреть пример Скачать
Как его использовать
В целях реализации плагина, нужно сначала вставить в <head> документа jquery.min.js и JQuery-ui.min.js (загружаются из Google), jquery.easing.1.3.js (плагин, который обрабатывает смягчение анимации), jquery.mousewheel.min.js (для поддержки функциональности колеса мыши) и jquery.mCustomScrollbar.css - это файл, где вы можете настроить стиль вашего контента и полосы прокрутки.
<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>
Далее вам нужно вставить разметку содержимого блоков где вы хотите вставить скроллер прокрутки. Структура разметки точно такая же для каждого блока содержимого, за исключением первого, который должн иметь уникальный идентификатор (в данном примере: mcs_container).
<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
<p>Your long content goes here...</p>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
</div>
Сохраняйте разметку структуры именно так, как показано выше, размещайте свое содержимое в div-блоке, который имеет имя класса content. Для того, чтобы иметь несколько блоков содержания с пользовательской полосой прокрутки в одном документе, можно использовать ту же разметку с уникальным идентификатором для каждого блока (например, mcs_container, mcs2_container, mcs3_container и т.д.).
Разметка для горизонтальных скроллеров нуждается в дополнительном div-блоке с именем класса horWrapper , который описывает .content div. Это необходимо для того, чтобы установить общую ширину содержимого автоматически, без необходимости вставлять его вручную в CSS или делать сложные расчеты с JavaScript.
<div id="mcs_container">
<div class="customScrollBox">
<div class="horWrapper">
<div class="container">
<div class="content">
<p>Your long content goes here...</p>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
</div>
</div>
Чтобы добавить дополнительные кнопки прокрутки, вам необходимо включить два дополнительных тега в mcs_container, с именами классов scrollUpBtn и scrollDownBtn:
<div id="mcs_container">
<div class="customScrollBox">
<div class="container">
<div class="content">
<p>Your long content goes here...</p>
</div>
</div>
<div class="dragger_container">
<div class="dragger"></div>
</div>
</div>
<!-- scroll buttons -->
<a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a>
</div>
Для дополнительной функции необходимо добавить несколько строк CSS после содержание разметки, для того, чтобы помочь пользователям, которые отключен JavaScript прокрутить содержимое:
<noscript>
<style type="text/css">
#mcs_container .customScrollBox{overflow:auto;}
#mcs_container .dragger_container{display:none;}
</style>
</noscript>
Последним шагом является включение плагина (jquery.mCustomScrollbar.js) и функции, которая вызывает прокрутку в конце документа, непосредственно перед закрытием </body>.
<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>
Вы можете настроить каждый блок содержимого полосы прокрутки, задав параметры функции:
- Тип прокрутки вертикальная или горизонтальная (vertical/horizontal)
- Прокрутка
- Спиральный тип смягчения
- Дополнительное пространство прокрутка вниз (относится к вертикальной прокрутки типа только)
- Установить высоты / ширины прокрутки (auto для аналогичной содержанию или fixed для фиксированных размеров)
- Установите поддержки колеса мыши (yes/no)
- Прокрутка кнопкими (yes/no)
- Скорость прокрутки кнопками (целое число от 1 до 20, где 1 медленная скорость прокрутки)
Несколько скроллеров
Для установки нескольких блоков содержания с пользовательской полосы прокрутки на одной странице, надо дать им уникальные идентификаторы (имея точную разметку) и добавить вызов функции для каждого из них. Например:
<script>
$(window).load(function() {
$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
$("#mcs2_container").mCustomScrollbar("vertical",0,"easeOutCirc",1.05,"fixed","yes","no",0);
$("#mcs3_container").mCustomScrollbar("vertical",900,"easeOutCirc",1.25,"auto","no","no",0);
});
</script>
