Оформление скроллбара в едином стиле для все браузеров

Здравствуйте. Сразу же хочу извиниться перед читателями блога за то, что так долго ничего не писал. На это были свои причины, большинство весьма приятные, о которых я расскажу в моем ЖЖ. А пока, вернемся к полезным рабочим записям.

Работая над очередным проектом, возникла задача оформить скроллбар в блоке в едином стиле для всех браузеров. Отмечу сразу, что лично я являюсь противником того, чтобы как либо украшать, переделывать или кастомизировать элементы системного интерфейса в браузерах. Даже если вы только начинаете изучать создание сайтов, то постарайтесь отучить себя и своих заказчиков от кастомизации системных элементов. Но есть заказчики, которые хотят «чтобы было красиво…» и хоть кол им на голове чеши. Специально для таких случаев эта статья.

Итак, у нас есть задача. Решить эту проблему с применением одного только 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 по сходной цене.Туристическое снаряжение, спальник, рюкзак, палатка магазин