Главная > Скрипты и коды > Оформление скроллинга - jQuery-плагин Custom Content Scroller

Оформление скроллинга - jQuery-плагин Custom Content Scroller


5 апреля 2013, 14:00. Разместил: Design FactoRy
Прокручиваемые элементы на сайте сегодня можно встретить не так часто, но они все равно есть в достаточном количестве. Дизайнеры, скорее всего, избегают их по причине их абсолютно непривлекательности. Стандартные скроллинги же также не имеют ничего привлекательного. Какой-то парень из Редмонда или Маунтин-Вью решил показать всем, как должны выглядеть скроллинги. С появлением jQuery-плагина Custom Content Scroller мы можем больше не думать о том, как кто-то нам советует представлять полосы прокрутки. Вместо этого, мы можем самостоятельно оформить их по собственному предпочтению или адаптировать под требования дизайн-проекта.

Оформление скроллинга - jQuery-плагин Custom Content Scroller

Встраиваем плагин и его таблицы стилей

После того, как мы скачали плагин и загрузили его на хостинг, на котором размещается наш сайт, нам нужно встроить его в наш HTML-документ. Кроме плагина, нам также следует встроить соответствующие каскадные таблицы стилей. Таблицы стилей предлагают нам стандартный шаблон, который, как нам кажется, должен подойти в большинстве случаев. Так что, если вам не хочется изменять его внешний вид, есть огромная вероятность, что вам и не придется этого делать.

После того, как процесс встраивания будет завершен, вы можете применить эти полосы прокрутки к любому элементу, который вы хотите оформить. Очевидно, это реализуется посредством javascript. Вы будете видеть этот скроллинг только тогда, когда содержимое элемента будет превышать его габариты.

<script>
(function($){
$(document).ready(function(){
$(".content").mCustomScrollbar();
});
})(jQuery);
</script>

В нашем примере мы применяем плагин ко всем HTML-элементам, в которых имеется элемент с классом 'content'. Здесь не требуется никаких дополнительных настроек. Хотя это вполне возможно, так как плагин позволяет вам индивидуализировать внешний вид скроллингов посредством нескольких опций.

Одна из возможностей, к примеру, заключается не только в том, что вы можете применять скроллинги, но также оформить и кнопки прокрутки. Эти кнопки позволят пользователям прокрутить контента на определенное число пикселей вверх или вниз:

$(".content").mCustomScrollbar(
scrollButtons: {
enable: true,
scrollAmount: 10
}
);

В большинстве случаев применяется вертикальный скроллинг. Немного реже применяется горизонтальный скроллинг, и здесь Custom Content Scroller также придет вам на помощь:

$(".content").mCustomScrollbar(
horizontalScroll: true
);

Здесь есть еще и другие опции, которые вы можете исследовать самостоятельно. Вы можете даже позволить осуществлять прокрутку при помощи колесика мыши, но тогда вам придется установить плагин mousewheel для jQuery.

Индивидуализация (оформление) скроллинга

Если вам не нравится стандартный внешний вид скроллинга, вы всегда можете изменить его при помощи CSS-кода.

Каскадные таблицы стилей содержат более 400 строк кода, и вряд ли их можно назвать достаточно понятными. Но документация плагина содержит в себе довольно подробное объяснение о том, что нужно изменять, чтобы поменять внешний вид и стиль скроллингов.

В завершение

Custom Content Scroller невероятно просто использовать и изменять. Что же еще может нам понадобится? Если у вас никак не получается реализовать привлекательные области контента с возможностью прокручивать его, то вам обязательно стоит попробовать Custom Content Scroller.
Вернуться назад