Здравствуйте. Сразу же хочу извиниться перед читателями блога за то, что так долго ничего не писал. На это были свои причины, большинство весьма приятные, о которых я расскажу в моем ЖЖ. А пока, вернемся к полезным рабочим записям.
Работая над очередным проектом, возникла задача оформить скроллбар в блоке в едином стиле для всех браузеров. Отмечу сразу, что лично я являюсь противником того, чтобы как либо украшать, переделывать или кастомизировать элементы системного интерфейса в браузерах. Даже если вы только начинаете изучать создание сайтов, то постарайтесь отучить себя и своих заказчиков от кастомизации системных элементов. Но есть заказчики, которые хотят «чтобы было красиво…» и хоть кол им на голове чеши. Специально для таких случаев эта статья.
Итак, у нас есть задача. Решить эту проблему с применением одного только CSS не удастся. Для этого нам понадобиться JavaScript и CSS. Я не буду рассказывать в этой статье о методах, которые основаны на использовании чистого JavaScript, поскольку это, как правило, решения с большими и объемными кодами. В данном материале я расскажу о двух способах, каждый из которых основан на популярных JavaScript фреймворках — jQuery и MooTools. Почему именно эти фреймворки, да потому, что на сегодня это одни из самых популярных JS-библиотек. Кроме того, MooTools по умолчанию используется в Joomla! 1.5, а jQuery дружит с WordPress и Drupal, а это «три кита» с которыми чаще всего сегодня работают веб-мастера.
MooTools ScrollContro
Данный плагин позволяет вам заменить скроллбар в любом контейнере в котором он используется. Причем количество таких контейнеров на странице не ограничено.
При этом вам доступны все основные фанкции скроллбара:
- Перетаскивание бегунка вверх-вниз
- Управления стрелками вверх-вниз
- Использование колесика мыши
Кроме этого:
- Размер бара изменяется в зависимости от содержания блока
- Вы можете использовать колесико мыши, только если курсор находится над содержанием
- Если содержание меньше, чем заданное пространство, то контроллеры скроллбара не будут выводится
плюс:
- Если JavaScript отключен выводится стандартный скроллбар
- Вид сролла полностью настраивается с помощью CSS
- Неограниченное число скроллбаров
- Работает в IE, FF, Opera, Safari, Chrome
Применять его очень просто. Достаточно лишь поместить контент в контейнер с идентификатором #contentcontainer
:
<div id="contentcontainer"> Text content </div> |
При этом его оформление может быть разным, но в CSS описании обязательно должен присутствовать атрибут overflow:auto
или overflow:scroll
. Например:
#contentcontainer { height: 300px; width: 435px; padding-top: 0; padding-right: 10px; overflow: scroll; overflow-x: hidden; margin-top: 20px; font-size: 1.1em; } |
Включить работу самого плагина нужно с помощью простой функции:
window.addEvent('domready', function() { new ScrollControl($('contentcontainer'), {'createControls': true}); }); |
Если же вы будете использовать несколько контейнеров, то им нужно присвоить разные идентификаторы. Кроме этого вы можете сами определить названия для элементов управления и для контейнера со скроллом, если вам необходимо, чтобы второй контейнер отличался от первого. Делается это с помощью такой строки:
new ScrollControl($('contentcontainer1'), {'htmlElementPrefix': 'control2_'}, $('scrolltrack1'), $('scrollknob1'), $('scrollUpBtn1'), $('scrollDownBtn1')); |
где:
- htmlElementPrefix — префикс контейнера-маски
- scrolltrack1 — альтернативный класс для контейнера по которому движется бегунок
- scrollknob1 — альтернативный класс бегунка
- scrollUpBtn1 и scrollDownBtn1 — кнопки вниз и вверх на скролле
Для использования плагина вам понадобится библиотека Mootools 1.11 и сам плагин, который можно скачать на eSteak.net. Плагин создан A+media.
Плагин jScrollPane для JQuery
jScrollPane является jQuery плагином, который позволяет заменить дефолтный скроллбар браузера в любом блоке со стилем overflow:auto
. Вы можете легко контролировать внешний вид прокрутки с помощью CSS.
jScrollPane кроссбраузерное решение, использующее jQuery. А если же браузер пользователя не поддерживает jQuery или JavaScript, то вы увидите дефолтный скролл. При этом плагин дублирует все основные действия скролла как и предыдущий вариант, но для точной копии всех событий мыши нужно подключить дополнительно mouse wheel plugin.
Использование
Для работы плагина необходимы следующие файлы:
- Библтотека jQuery
- the mouse wheel плагин (если вам нужна полная поддержка всех событий мыши)
- the jQEm плагин (если вам нужно чтобы ваш скролл автоматически менял размер при добавлении контента пользователем)
- сам jScrollPane плагин
- файл jScrollPane.css
Все файлы можно загрузить со страницы плагина jScrollPane.
Подключается все это простым добавлением в head
вашей страницы следующих ссылок:
<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.min.js"></script> <script type="text/javascript" src="scripts/jquery.em.js"></script> <script type="text/javascript" src="scripts/jScrollPane.js"></script> <link rel="stylesheet" type="text/css" media="all" href="styles/jScrollPane.css" /> |
Вы можете использовать любой селектор по отношению к элементу, к которому нужно применить действие плагина. В примере ниже плагин начинает работать, когда загруженный документ и имеет на странице хотя бы один элемент с классом scroll-pane
:
$(function() { $('.scroll-pane').jScrollPane(); }); |
Также вы можете добавить к функции дополнительные параметры:
- scrollbarWidth [int] — ширина скроллбара в пикселях (по умолчанию 10)
- scrollbarMargin [int] — отступ слева от скроллбара в пикселях (по умолчанию 5)
- wheelSpeed [int] — управление скоростью перемещения контента при скролле в пикселях (по умолчанию 18)
- showArrows [boolean] — управляет выводом стрелочек вверх-вниз (по умолчанию задано ‘false’)
- arrowSize [int] — высота стрелок если showArrows=true (подсчитывается из CSS если не задана)
- animateTo [boolean] — определяет автопрокрутку к определенному флагу scrollTo and scrollBy (по умолчанию ‘false’)
- dragMinHeight [int] — минимальная высота при которой появляется скролл (по умолчанию 0)
- dragMaxHeight [int] — максимальная высота при которой появляется скролл (по умолчанию 99999!)
- animateInterval [int] — Интервал в миллисекундах для обновления и анимации области скролла (по умолчанию 100)
- animateStep [int] — Определяет расстояние при достижении которого начинается анимация (по умолчанию 3)
- maintainPosition [boolean] — Позволяет зафиксировать позицию контента при его изменении (по умолчанию ‘true’)
- scrollbarOnLeft [boolean] — Определяет положение скроллбара слева от контента (также можно определить с помощью CSS)
- reinitialiseOnImageLoad [boolean] — Определяет должен ли скрипт реинициализировать себя при добавлении в контент изображения (по умолчанию ‘false’)
Вот, пожалуй, и все. Остается только добавить что я не стал показывать примеры работы скриптов, так как это можно увидеть на их страничках.
P.S. Мысли об умельцах…
Да, не перестаю удивляться талантам наших умельцев. У более того прозорливости и таланту одесситов. Ведь даже не нужно заходить на сайт города одесса, чтобы знать что в ней есть все. Допустим, швейцарские часы — swiss replica watches, или пресловутый fake rolex — да, если ты чего-то не нашел, то поезжай в Одессу. И будет тебе не только Rolex, но и ROLLS-ROYCE по сходной цене.Туристическое снаряжение, спальник, рюкзак, палатка магазин
Never Lex
Спасибо. Нигде больше не нашёл нормальной инфы по этому вопросу.
vov41k
Отлично, Нужно будет сделать =)
andry308
ну просто отличный плагин!! Но жаль что его не совместили с facebox-ом!!!
Rockufa
JScrollPane кстати только с вертикальным скроллом работает, горизонтальный увы не обрабатывает
Даня
ScrollControl косячит в Google Chrome когда в тексте есть изображения с непрописанными «габаритами». Решение — прописывать width и height картинок. либо изменить событие с domready на load, но тогда при загрузке будет мелькать стандартный скролл.
IrinaSka
Спасибо!!!! Не могла понять, почему не работает в Chrome! теперь все ок!
Сергей
Не могу скачать MooTools ScrollContro, сайт разработчика не работает уже несколько дней. Кто может, скиньте мне на4cepera@gmail.com
Очень срочно надо!
Обываель
Тупая копипаста с хабра h_ttp://habrahabr.ru/blogs/personal/80449/
Hiway
slo_nik
Добрый вечер.
Вот какая фигня творится с плагином.
В общем работает без проблем, но попробовал добавить скролл к фотогалерее и начались косяки.
Вроде как места ещё достаточно, но скролл уже появляется…
Стоит добавить после вывода изображений параграф с любым текстом и всё становится на свои места….