1. Кастомизация
скроллбара

2. Кузнецов Дмитрий
Разработчик интерфейсов 2ГИС

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

4. Windows XP

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

6. CSS
Только в браузерах на webkit
.scroller::-webkit-scrollbar {
width: 0;
}

7. Дизайн и механизм
Совершенно разные вещи!

8. over 43 jQuery plugins
Более 43 решений

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

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

11. Без jQuery
$(’.scroll’).baron();
baron({
dom: bonzo,
event: bean,
selector: qwery
});

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

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

14. Фиксируем (заголовки)
fixFlag = [ 1, 1, 2, 3 ]
// Лезем в DOM только при необходимости!

15. Пробрасываем событие
try {
e = document.createEvent('WheelEvent');
e.initWebKitWheelEvent(e.originalEvent.
wheelDeltaX, e.originalEvent.wheelDeltaY
);
scroller.dispatchEvent(e);
event.preventDefault();
} catch (exception) {};

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

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

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

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

21. Повторная инициализация
data-baron-inited="true"

22. Горизонтально?
dir = {
pos: 'left',
size: 'width'
client: 'clientWidth',
offset: 'offsetWidth'
...
}
bar[dir.pos] = ...;

23. Выводы
1. Сменили дизайн
2. Сохранили механику
3. Отвязались от jQuery
4. Уложились в 1.5 кб
5. «Гореть вам в аду!» – радио Маяк

24. Baron
diokuz.github.com/baron - демо
github.com/Diokuz/baron - последняя версия
habrahabr.ru/company/2gis/blog - статья
moskva.fm - проклятие

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

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