Как создать scrollbar со свойствами как у системного, но с оригинальный дизайном.

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
• Ограничения по расположению скроллбара
• Непростой синтаксис
01.
02.
8
::-webkit-scrollbar-button:horizontal:decrement:hover {
}

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

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

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

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

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

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

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

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

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

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

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

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

21. Плагин fix
$('.clipper_fix').baron({
scroller: '.scroller',
bar: '.scroller__bar',
barOnCls: 'baron'
}).fix({
elements: '.header__title',
outside: 'header__title_state_fixed',
before: 'header__title_position_top',
after: 'header__title_position_bottom'
});
CSS
.header__title_state_fixed {
position: absolute;
z-index: 1;
}
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.
21
html Sticky footer

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

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'
23
$('.clipper_fix').baron({
}).fix({
}).controls({
}).test()

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

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 used in
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
26
Baron
Etymology
Baron
Etymology

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
01.
02.
03.
04.
05.
06.
<div class="clipper">
<div class="scroller">
Content
</div>
</div>
<div class="scroller__bar"></div>
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. Код
01.
02.
03.
04.
05.
$('.profit').baron({
scroller: '.scroller',
bar: $('.profit .scroller__bar'),
barOnCls: 'baron'
});
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
33
Baron
Etymology

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

35. Работает на API 2GIS
Лицензионное соглашение
Справочник Проезд
Организации 506 Расширенный поиск
Видимые на карте рейтинг Открыто
Пив & Ко, сеть магазинов разливного пива
Учителей, 6
34 филиала
8 отзывов
Живое Разливное, магазин разливного пива
Серафимы Дерябиной, 43а
1 отзыв
Пивная лавка, сеть магазинов
Луначарского, 81
10 филиалов
3 отзыва
Beerlife, сеть магазинов живого пива
Ляпустина, 8
6 филиалов
3 отзыва
Пивная коллекция, магазин разливного пива
Пальмиро Тольятти, 19
2 филиала
4 отзыва
BeerHall, сеть магазинов разливного пива
Сыромолотова, 16
15 филиалов
пиво
35

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