Опубликовано автор в категориях Верстальщику.

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

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

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

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

  1. Rockufa

    JScrollPane кстати только с вертикальным скроллом работает, горизонтальный увы не обрабатывает

    Ответить
  2. Даня

    ScrollControl косячит в Google Chrome когда в тексте есть изображения с непрописанными «габаритами». Решение — прописывать width и height картинок. либо изменить событие с domready на load, но тогда при загрузке будет мелькать стандартный скролл.

    Ответить
    • Hiway

      Обываель Вы хотя-бы на даты создания постов посмотрите! Здесь пост создан в 2009 году, а на Хабре в 2010, так вот теперь и спрашивается, кто у кого копипастит???

      Ответить
  3. slo_nik

    Добрый вечер.
    Вот какая фигня творится с плагином.
    В общем работает без проблем, но попробовал добавить скролл к фотогалерее и начались косяки.
    Вроде как места ещё достаточно, но скролл уже появляется…
    Стоит добавить после вывода изображений параграф с любым текстом и всё становится на свои места….

    Ответить

Оставить комментарий

  • (не будет показан)