Если вам нужно создать красивую прокрутку для обычного html блока – этот плагин отлично подходит для этого. Есть два вида прокрутки (скроулинга) – вертикальная и горизонтальная, так же прокрутка работает при прокрутке колесика мышки. Еще важным моментом является – настройка скорости прокрутки и высоты поля с ползунком для прокрутки. Давайте посмотрим как это работает на деле. Сначала интегрируем стили и библиотеки со скриптами: Код: <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> Теперь давайте займемся построением HTML структуры для этого плагина прокрутки: Код: <div id="mcs_container"> <div class="customScrollBox"> <div class="container"> <div class="content"> <p>Содержание блока</p></div> </div> <div class="dragger_container"></div> </div> <!-- Кнопки скроулинга --> <a class="scrollUpBtn" href="#"></a> <a class="scrollDownBtn" href="#"></a> </div> </div></div> Теперь добавим еще несколько строк в CSS правило для тех у кого отключен javascript: <noscript> <style type="text/css"> #mcs_container .customScrollBox{overflow:auto;} #mcs_container .dragger_container{display:none;} </style> </noscript> Последним шагом является запуск скрипта и интеграция дополнительной библиотеки для прокрутки в конце документа: <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> Так же вы можете настроить плагин так как вам хочется, используя набор возможностей передаваемые функцией mCustomScrollbar: Первым идет параметр определяющий ориентацию прокрутки – вертикальная или горизонтальная (“vertical”, “horizontal”) Так же можно задать цифру ослабления прокрутки Тип прокрутки Дополнительное пространство для прокрутки (только для вертикальной прокрутки) Установить высоту и ширину пространства для ползунка прокрутки (по-умолчанию auto – равен размеру блока) Поддерживать прокрутку колесиком мышки (“yes” или “no”) Поддерживать прокрутку кнопками клавиатуры (“yes” или “no”) Скорость прокрутки кнопками клавиатуры от 1 до 20 Пример скачать можно тут