Блог saintista

Часто при заказе верстки заказчик желает чтобы системные элементы, например полосы прокрутки (scrollbar) выглядели в одном стиле в разных браузерах. Кастомизация системных элементов неблагодарное занятие, но если нужно то нужно.

Данную проблему решить с помощью чистого css невозможно.
Решение на чистом JavaScript зачастую довольно громоздки, в плане количества строк кода.

Рассмотрим решение базирующееся на популярном фреймворке – jQuery/

Что и как?

Нам потребуется несколько файлов

Для работы плагина необходимы следующие файлы:

плагин the mouse wheel (реализация полной поддержки всех событий мыши)
плагин the jQEm (реализация динамического изменения размера скролла при изменении количества контента пользователем)
плагин jScrollPane (нужный нам плагин реализующий скролл у любого блока со стилем overflow:auto)
jScrollPane.css – стили

Все файлы можно загрузить вот здесь.

Подключается все это простым добавлением в head вашей страницы следующих ссылок:

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript” src=”jquery.mousewheel.min.js”></script>

<script type=”text/javascript” src=”jquery.em.js”></script>

<script type=”text/javascript” src=”jScrollPane.js”></script>

<link rel=”stylesheet” type=”text/css” media=”all” href=”jScrollPane.css” />

Активируется скроллбар для заданного элемента кодом :

$(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’)

Каким образом имитировать скроллбар операционной системы?

Нужно немного изменить css, например под MAC OS

.osX .jScrollPaneTrack {
background: url(osx_track.gif) repeat-y;
}
.osX .jScrollPaneDrag {
background: url(osx_drag_middle.gif) repeat-y;
}
.osX .jScrollPaneDragTop {
background: url(osx_drag_top.gif) no-repeat;
height: 6px;
}
.osX .jScrollPaneDragBottom {
background: url(osx_drag_bottom.gif) no-repeat;
height: 7px;
}
.osX a.jScrollArrowUp {
height: 24px;
background: url(osx_arrow_up.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowUp:hover {
background-position: 0 0;
}
.osX a.jScrollArrowDown {
height: 24px;
background: url(osx_arrow_down.png) no-repeat 0 -30px;
}
.osX a.jScrollArrowDown:hover {
background-position: 0 0;
}

.left .jScrollPaneTrack {
left: 0;
right: auto;
}
.left a.jScrollArrowUp {
left: 0;
right: auto;
}
.left a.jScrollArrowDown {
left: 0;
right: auto;
}

/* IE SPECIFIC HACKED STYLES */
* html .osX .jScrollPaneDragBottom {
bottom: -1px;
}
/* /IE SPECIFIC HACKED STYLES */

В архиве все перечисленные изображения в стилях присутствуют

Tweet This Post

Тэги: browser scrollbar, interfase, JavaScript, jQuery

jQuery SELECT (jquery-asmselect)

Wordpress подключение JQuery

jQuery png Fix

jQuery ajax в IE7

jQuery cookie проще некуда

Prototype и jQuery используем одновременно

jQuery watermark input field

jQuery округлые углы

jQuery древовидное меню

jQuery ajax рейтинг

jQuery table sort сортировка таблиц

jQuery выбираем цвет

Запись была опубликована Понедельник, сентября 28, 2009 в 21:09 в рубрике Ultimate jQuery, jQuery, js. Читать рассылку RSS 2.0. Вы можете оставить комментарий или трэкбек с Вашего сайта.