Существует несколько десятков JavaScript библиотек для кастомизации скроллбара. Подавляющее их большинство является jQuery плагинами, которые заменяют механизм скролла. Такой подход имеет три серьёзных недостатка: отсутствие кросс-браузерности, потеря особенностей работы скролла на ряде платформ, зависимость от jQuery. Мы предположили, что любая комбинация браузера, операционной системы, «железа» и устройства для скролла удовлетворит пользователя в части механизма скролла лучше, чем самый продвинутый jQuery плагин. В нашем решении механизм скролла не меняется: он остаётся системным даже при отключенном JS. Вдобавок мы предлагаем набор плагинов для лучшего визуального оформления блока со скроллом.

1. Произвольная смена дизайна
системного скроллбара
Кузнецов Дмитрий, разработчик интерфейсов, 2GIS Online

2. Структура доклада
1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
2

3. Зачем кастомизировать скроллбар?
• Видение дизайнера
• Стратегическая возможность
• Одностраничные приложения
3

4. 4

5. 5

6. 6

7. 1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
7

8. CSS
• Только webkit
• Ограничения по расположению скроллбара
• Непростой синтаксис
::-webkit-scrollbar-button:horizontal:decrement:hover {
}
01.
02.
8

9. ECMAScript: эмуляция скролла
• 40+ готовых решений
• Поддержка всех браузеров
• Подмена механизма скролла
• Трата ресурсов на эмуляцию
9

10. ECMAScript: только замена скроллбара
• 3 готовых решения
• Большой размер + проблемы с производительностью
• Модификация DOM и манипуляция стилями
• Ограничения по положению скроллбара
10

11. 1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
11

12. Расчитываем ширину нативного
скроллбара
DHTML: offsetWidth
Δ = offsetWidth - clientWidth
12

13. Прячем нативный рисуем свой
13

14. Максимально свободная кастомизация
<div class=" clipper ">
<div class=" scroller ">
Content
</div>
</div>
01.
02.
03.
04.
05.
14

15. Минимальное вмешательство в DOM
• Атрибуты data-*
• Самые необходимые инлайн-стили
• Максимизация управления UI через CSS
15

16. Максимальное использование CSS
• Барон знает о:
DOM-элементах ; CSS-классах ; событиях ; координатах
• Барон ничего не знает о:
opacity ; linear-gradient ; box-shadow ; position
...и других свойствах CSS
16

17. Оптимизация кода
width = scroller.offsetWidth
height = scroller.offsetHeight
offset = ['offsetWidth', 'offsetHeight']
size = scroller[ offset [direction]]
01.
02.
03.
04.
17

18. Независимость
$ : function(selector, context) {
return bonzo(qwery(selector, context));
},
event : function(elem, event, func, mode) {
if (mode == 'trigger') mode = 'fire';
bean[mode || 'on'](elem, event, func);
}
01.
02.
03.
04.
05.
06.
07.
18

19. Расширяемость плагинами
$('.clipper').
baron (). fix (). pull (). controls (). test ().
dispose ();
01.
02.
03.
19

20. 1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
20

21. Плагин fix
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
});
.header__title_state_fixed {
position: absolute;
z-index: 1;
}
01.
02.
03.
01.
02.
03.
04.
05.
01.
02.
03.
04.
$('.clipper_fix').baron({
}).fix({
CSS
html
The title was quite common
in most European countries
often in a slightly
modified form. In Italian,
the word used was Barone.
The corresponding title in
the Holy Roman Empire was
Freiherr.
Sticky footer
21

22. Плагин controls
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
track: '.scroller__track',
forward: '.scroller__up',
backward: '.scroller__down'
});
01.
02.
03.
01.
02.
03.
04.
01.
02.
03.
04.
$('.clipper_fix').baron({
}).fix({
}).controls({
CSS
html
22

23. Плагин test
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
track: '.scroller__track',
forward: '.scroller__up',
backward: '.scroller__down'
01.
02.
03.
01.
02.
03.
04.
01.
02.
03.
$('.clipper_fix').baron({
}).fix({
}).controls({
}).test()
23

24. scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
track: '.scroller__track',
forward: '.scroller__up',
backward: '.scroller__down'
block: '.load',
01.
02.
03.
01.
02.
03.
04.
01.
02.
03.
01.
$('.clipper_fix').baron({
}).fix({
}).controls({
}).test()
}).pull({
Плагин pull
24

25. 1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
25

26. Baron vs jScrollPane
Baron is a title of nobility. In the
kingdom of England, the medieval Latin
word baro, baronis was used originally
to denote a tenant-in-chief of the
early Norman kings who held his lands
by the feudal tenure of "barony" (in
Latin per baroniam), and who was
entitled to attend the Great Council
which by the 13th century had
developed into the Parliament of
England.
The title was quite common in most
European countries often in a slightly
modified form. In Italian, the word
used was Barone. The corresponding
title in the Holy Roman Empire was
Freiherr.
The word baron comes from the Old
French baron, from a Late Latin baro
"man; servant, soldier, mercenary" (so
Baron
Etymology
Baron is a title of nobility. In the
kingdom of England, the medieval Latin
word baro, baronis was used originally
to denote a tenant-in-chief of the
early Norman kings who held his lands
by the feudal tenure of "barony" (in
Latin per baroniam), and who was
entitled to attend the Great Council
which by the 13th century had
developed into the Parliament of
England.
The title was quite common in most
European countries often in a slightly
modified form. In Italian, the word
used was Barone. The corresponding
title in the Holy Roman Empire was
Freiherr.
The word baron comes from the Old
French baron, from a Late Latin baro
"man; servant, soldier, mercenary" (so
Baron
Etymology
Сравнили механику baron и jScrollPane
26

27. На самом деле нет
27

28. Что можно сравнить
Baron jScrollPane
Общий размер (gzip, kB) 2.11 + 4.47 4.52 + 30.1
DOM 0 +9
Расположение скроллбара Свободное Фиксированное
Механизм Нативный Эмуляция
Поддержка overflow: scroll все браузеры
Быстрый старт Сложнее Просто
28

29. 1. Зачем кастомизировать скроллбар?
2. Способы кастомизации
3. Барон: идея и принципы построения
4. Плагины барона
5. Сравнение барона с альтернативой
6. Туториал по использованию
29

30. HTML
<div class=" clipper ">
<div class=" scroller ">
Content
</div>
</div>
<div class=" scroller__bar "></div>
01.
02.
03.
04.
05.
06.
30

31. CSS
. clipper {
overflow: hidden;
position: relative;
}
. scroller {
overflow-y: scroll;
}
. scroller::-webkit-scrollbar {
width: 0;
}
. scroller__bar {
position: absolute;
}
01.
02.
03.
04.
05.
06.
07.
08.
09.
10.
11.
12.
13.
31

32. Код
$('.profit').baron({
scroller: '.scroller',
bar: $('.profit .scroller__bar'),
barOnCls: 'baron'
});
01.
02.
03.
04.
05.
32

33. Profit
Baron is a title of nobility. In the kingdom of England, the
medieval Latin word baro, baronis was used originally to denote a
tenant-in-chief of the early Norman kings who held his lands by
the feudal tenure of "barony" (in Latin per baroniam), and who was
entitled to attend the Great Council which by the 13th century had
developed into the Parliament of England.
The title was quite common in most European countries often in a
slightly modified form. In Italian, the word used was Barone. The
corresponding title in the Holy Roman Empire was Freiherr.
The word baron comes from the Old French baron, from a Late Latin
baro "man; servant, soldier, mercenary" (so used in Salic Law;
Alemannic Law has barus in the same sense). Isidore in the 7th
century thought the word was from Greek βαρύς "heavy" (because of
the "heavy work" done by mercenaries), but the word is presumably
of Old Frankish origin, cognate with Old English beorn meaning
"warrior, nobleman"). Cornutus in the first century already
reports a word barones which he took to be of Gaulish origin. He
glosses it as meaning servos militum and explains it as meaning
"stupid", by reference to classical Latin bāro "simpleton, dunce";
because of this early reference, the word has also been suggested
Baron
Etymology
33

34. Итого
• Свободная CSS-кастомизация скроллбара
• Автоматическая поддержка всего где есть overflow: scroll
• Fallback - нативный скроллбар
• Размер с зависимостями: от 6 кБ в gzip
• Система плагинов + 4 плагина в коробке
34

35. <div><img src="//mc.yandex.ru/watch/837864" style="position:absolute; left:-9999px;" alt=""/></div>
Загрузка карты...
35
Поиск проезда
Ваш маршрут в 4 шага
Даже 2ГИС не знает ответа
на Ваш вопрос
— Проверьте, все ли названия написаны верно;
Очистить
Введите адрес или место, откуда вы едете,
в поле А; либо укажите точку на карте
Точно также укажите куда вы хотите попасть
Нажмите на кнопку «Проложить маршрут»
Выберите подходящий вам вариант маршрута
Поиск в справочнике
А
Б
← К результатам поиска
НайтиОпределение вашего города...

36. В планах
• Плагин для мега-быстрого старта
• Плагин для ликвидации зависимостей
• Ваши идеи?
• Автоматическое тестирование
36

37. Автотесты (Phantom JS)
37
• Прогон всех тестов при коммите
• Отнимает 3-5 секунд + 5 минут просмотра тестов в реальных
браузерах
• Невозможно просмотреть или забыть тест

38. About
Кузнецов Дмитрий, разработчик интерфейсов 2GIS Online
dm.kuznecov@2gis.ru
github.com/Diokuz/baron
habrahabr.ru/company/2gis
38