Кастомизация

скроллбара

Кузнецов Дмитрий

Разработчик интерфейсов 2ГИС

Осознание потребности

Windows XP

Контрастная тема

CSS

Только в браузерах на webkit

.scroller::-webkit-scrollbar {

width: 0;

}

Дизайн и механизм

Совершенно разные вещи!

over 43 jQuery plugins

Более 43 решений

Шаблонный подход

$(‘scroll’).сделайХорошо();

Без jQuery

$(’.scroll’).baron();

baron({

dom: bonzo,

event: bean,

selector: qwery

});

Прячем системный скроллбар

Рисуем свой скроллбар

Фиксируем (заголовки)

fixFlag = [ 1, 1, 2, 3 ]

// Лезем в DOM только при необходимости!

Пробрасываем событие

try {

e = document.createEvent('WheelEvent');

e.initWebKitWheelEvent(e.originalEvent.

wheelDeltaX, e.originalEvent.wheelDeltaY

);

scroller.dispatchEvent(e);

event.preventDefault();

} catch (exception) {};

Изменение размеров

Изменение контента

Много фиксируемых заголовков

Мало контента

Повторная инициализация

data-baron-inited="true"

Горизонтально?

dir = {

pos: 'left',

size: 'width'

client: 'clientWidth',

offset: 'offsetWidth'

...

}

bar[dir.pos] = ...;

Выводы

1. Сменили дизайн

2. Сохранили механику

3. Отвязались от jQuery

4. Уложились в 1.5 кб

5. «Гореть вам в аду!» – радио Маяк

Baron

diokuz.github.com/baron - демо

github.com/Diokuz/baron - последняя версия

habrahabr.ru/company/2gis/blog - статья

moskva.fm - проклятие

Демонстрация

Спасибо за внимание