Встраиваем плагин и его таблицы стилей
После того, как мы скачали плагин и загрузили его на хостинг, на котором размещается наш сайт, нам нужно встроить его в наш 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.