Блог 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 */

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

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

jQuery SELECT (jquery-asmselect)

jQuery отслеживаем ввод символа в input (Enter, tab)

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

jQuery png Fix

Печать картинки на странице через js

jQuery ajax в IE7

jQuery live hover

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

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

jQuery watermark input field

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

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

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