Плагин jQuery - Custom Scroller

Плагин CustomScrollbar использует jQuery UI, который настраивается с помощью CSS. Возможно установить вертикальную, горизонтальную прокрутку содержания, использовать поддержку прокрутки содержания с помощью колесика мыши  (используется плагин jQuery mouse-wheel), сглаживание перемещений прокручиваемого содержания и настраиваемая высота/ширина панели прокрутки.

Сайт проекта.

 

Как использовать

Для использования плагина необходимо включить в тег 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>

Затем нужно добавить разметку для блоков содержания, в которых будет использоваться настраиваемая прокрутка в тег head. Элемент div контейнера блока должен содержать уникальный id (в нашем примере: mcs_container).

<div id="mcs_container">
	<div class="customScrollBox">
		<div class="container">
			<div class="content">
				<p>Содержание блока размещаем здесь...</p>
			</div>
		</div>
		<div class="dragger_container">
			<div class="dragger">
			</div>
		</div>
	</div>
</div>

Используйте разметку, приведенную выше. Содержание нужно размещать в элемент  div с классом content. Чтобы использовать несколько блоков с настраиваемой панелью прокрутки в одном документе нужно использовать для них такую же разметку, но с указанием уникальных id  для каждого блока. (например, mcs_container, mcs2_container, mcs3_container и так далее).

Разметка для использования горизонтальной прокрутки нуждается в дополнительном элементе div с классом horWrapper, который содержит элемент div container. Данное действие необходимо для установки общей ширины содержания автоматически, без применения установок в CSS или сложных вычислений в JavaScript.

<div id="mcs_container">
	<div class="customScrollBox">
		<div class="horWrapper">
			<div class="container">
				<div class="content">
					<p>Размещаем содержание здесь ...</p>
				</div>
			</div>
			<div class="dragger_container">
				<div class="dragger">
				</div>
			</div>
		</div>
	</div>
</div>

Для добавления дополнительных кнопок прокрутки нужно вставить два дополнительных тега ссылки в div mcs_container  с классами scrollUpBtn и scrollDownBtn:

<div id="mcs_container">
	<div class="customScrollBox">
		<div class="container">
			<div class="content">
				<p>Содержание вставляем здесь ...</p>
			</div>
		</div>
		<div class="dragger_container">
			<div class="dragger">
			</div>
		</div>
	</div>
	<!-- кнопки прокрутки содержания -->
	<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>

Прокрутку каждого блока можно настраивать с помощью параметров, которые передаются в функцию при вызове:

  1. Тип прокрутки (значение: "vertical" или "horizontal")
  2. Величина перемещения со сглаживанием (0 - сглаживание не используется)
  3. Тип сглаживания перемещений
  4. Дополнительное место снизу, только для вертикального типа прокрутки (минимальное значение: 1)
  5. Настройка высоты/ширины панели прокрутки (значение: "auto" или "fixed")
  6. Поддержка прокрутки колесиком мыши (значение: "yes" или "no")
  7. Прокрутка с помощью клавиш (значения: "yes" или "no")
  8. Скорость прокрутки (значение: 1-20, 1 соответствует самой медленной скорости)

 

Несколько блоков с прокруткой на одной странице

Для использования блоков содержания с настраиваемой панелью прокрутки на одной странице нужно установить для них уникальные id (сохраняя разметку) и добавить вызов функции для каждого блока. Например:

<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>

Вы можете задать стиль для каждой панели прокрутки отдельно в файле jquery.mCustomScrollbar.css, так как стили применяются только для элемента с определенным id (смотрите файл стилей в архиве с исходниками).

 

Прокручивание большого содержания

Есть ошибка в  jquery.min.js, которая сбрасывает значение в 0 при анимации значения больше, чем 9999 px. Данная ошибка влияет на панель прокрутки, если высота или ширина содержания равна или больше 10000 px, что приводит к рывкам при прокрутке. Это известная ошибка, которая будет исправлена в следующих версиях библиотеки. Но сейчас придётся использовать временное решение. Так как редактирование jquery.min.js является плохой идеей, мы просто изменим функцию, которая содержит код с ошибкой.

Нужно вставить следующий код в функцию загрузки окна:

/* Функция для обхода ошибки с 10000 px для jquery.animate */
$.fx.prototype.cur = function(){
    if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
      return this.elem[ this.prop ];
    }
    var r = parseFloat( jQuery.css( this.elem, this.prop ) );
    return typeof r == 'undefined' ? 0 : r;
}

 

Динамическая загрузка содержания

Для динамической загрузки содержания в блок с панелью прокрутки (с помощью .load(), запросов AJAX и так далее) нужно вызвать функцию mCustomScrollbar  после завершения загрузки. Например:

$("#mcs_container .content").load("new.html", function(){
	$("#mcs_container").mCustomScrollbar("vertical",400,"easeOutCirc",1.05,"auto","yes","yes",10);
});

На демонстрационной странице организовано несколько блоков с динамической загрузкой содержания на одной странице.

 

Скрытие панелей прокрутки содержания

Если вам  нужно спрятать панели прокрутки, то скрывать их нужно после вызова функции mCustomScrollbar. Данная последовательность операций очень важна, так как скрипт должен правильно вычислить ширину и высоту содержания.

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Марта 2011 13:34
    sumby
    Плавная прокрутка , похоже на flash скролинг
  • 19 Марта 2011 13:53
    smol09
    jQueri реально рулит
  • 19 Марта 2011 14:09
    profesor08
    Вот это тема!
    • 19 Марта 2011 20:32
      rushis
      точно
  • 19 Марта 2011 21:20
    BFM174
    "которая содержит кож с ошибкой." не КОЖ а КОД =))
  • 20 Марта 2011 13:31
    Zedamin
    Че то мне не хочется ставить на сайт "кож")
  • 2 Мая 2011 22:31
    shamil95
    Шикарная втука
  • 23 Октября 2011 15:28
    tron
    Эффектно!
  • 16 Февраля 2012 10:02
    Valet777
    Спасибо, действительно смотрится очень эффектно.
  • 15 Января 2013 14:22
    bearwolf
    Класный скролинг, но Как сделать скролинг внутри другого скрола? Этого в примере нет, но необходимость большая. Подскажу, оно встраиваэться нормально по виду, но сбиваеться математика. Подскажите как исправить даную проблему? отошлите ответ пожалуйста на почту andrey22 R @ rambler . ru
  • 24 Апреля 2013 13:09
    alexsew
    Супер! Спасибо! Очень помогло - все работает на ура!
  • 21 Июня 2013 10:18
    bidlokoder
    мда универсальность к хренам?
  • 22 Июня 2013 16:54
    Роман Бебнев
    как сделать эту прокрутку для ipad и всего прочего, кто нибудь знает? чтобы пальцем можно было прокручивать
^ Наверх ^