Плагин jQuery для удобной прокрутки - Custom Scroller

Сейчас, в сайтостроительстве присутствует немыслимое количество плагинов, дополнений и других вещей для удобства, как пользователей, так и самих создателей интернет-ресурсов.

Об одном из таких плагинов мы и расскажем, называется он CustomScrollbar и используется для вертикальной и горизонтальной прокрутки содержания веб-ресурсов.

Предположим, вам нужно заказать лендинг, и необходимо создать красивую прокрутку для обычного блока html, для решения этой задачи CustomScrollbar подойдёт как нельзя лучше.

При изготовлении сайтов используется два вида прокрутки – вертикальная или горизонтальная, работает она, либо при прокрутке колесика мыши, либо при нажатии клавиш. Кроме того, важным моментом является, такой параметр как настройка скорости и высоты поля с ползунком для прокрутки.

CustomScrollbar - это плагин использующий jQuery UI, и настраиваемый при помощи CSS. Плагин имеет возможность устанавливать как вертикальную, так и горизонтальную прокрутку содержания веб-страницы. А благодаря jQuery mouse-wheel можно использовать поддержку прокрутки контента с помощью колесика мыши, сглаживание перемещения и настроить высоту и ширину полосы прокрутки.

Для работы плагина необходимо разместить в теге "head" сайта, включение файлов jquery.min.js, jquery-ui.min.js, jquery.easing.1.3.js (сглаживание перемещений содержимого), jquery.mousewheel.min.js (для поддержки перемещений колесиком мыши) и jquery.mCustomScrollbar.css, содержащий CSS для контента и панели прокрутки.

После этих манипуляций необходимо добавить в тег "head" разметку для блоков, в которых будет использоваться прокрутка.

С помощью разметки, содержание размещается внутри элемента "div" с классом "content". Кроме того, элемент "div" должен содержать уникальный "id" в каждом блоке, это нужно, чтобы можно было использовать несколько блоков с настраиваемой скроллинг панелью в одном документе.

Для горизонтальной прокрутки функцию mCustomScrollbar необходимо вызывать с параметром horizontalScroll:true. Это необходимо для автоматической установки общей ширины наполнения, без изменений в CSS или сложных вычислений для JavaScript.

В завершении, в конце документа, перед закрытием тега body, необходимо включить плагин jquery.mCustomScrollbar.js, а также функцию вызова и конфигурации скролл-панели.

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

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

Скрытие панелей прокрутки

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

Поддержка мобильных устройств

Одной из ключевых возможностей jQuery CustomScrollbar, является поддержка мобильных сенсорных устройств на операционных системах iOs и Android.Прокрутку можно настроить для каждого блока с помощью параметров:

• Тип прокрутки ("vertical" или "horizontal")
• Перемещения со сглаживанием (значение "0" - не используется)
• Тип сглаживания
• Дополнительное место снизу (только для вертикальной прокрутки, минимальное значение: "1")
• Настройка высоты или ширины скроллинг-панели ("auto" или "fixed")
• Прокрутка колесиком мыши ("yes" или "no")
• Прокрутка клавишами ("yes" или "no")
• Скорость скроллинга (от "1" до "20")

О недостатках

В jquery.min.js есть ошибка, которая сбрасывает значение анимации до "0" если оно больше, чем 9999 px. Эта ошибка не существенна, но если высота или ширина содержания равна или больше 10000 px, то ошибка вызывает рывки при прокрутке страницы, а это, согласитесь, портит впечатление от общего внешнего вида веб ресурса. Это уже известная ошибка, поэтому будем надеяться, что в следующих версиях библиотеки она будет исправлена. А до тех пор каждый разработчик находит своё, временное решение.