Произвольная смена дизайнасистемного скроллбара

Кузнецов Дмитрий, разработчик интерфейсов, 2GIS Online

Структура доклада1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

2

Зачем кастомизировать скроллбар?• Видение дизайнера

• Стратегическая возможность

• Одностраничные приложения

3

4

5

6

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

7

CSS• Только webkit

• Ограничения по расположению скроллбара

• Непростой синтаксис

::-webkit-scrollbar-button:horizontal:decrement:hover {

}

01.

02.

8

ECMAScript: эмуляция скролла• 40+ готовых решений

• Поддержка всех браузеров

• Подмена механизма скролла

• Трата ресурсов на эмуляцию

9

ECMAScript: только замена скроллбара• 3 готовых решения

• Большой размер + проблемы с производительностью

• Модификация DOM и манипуляция стилями

• Ограничения по положению скроллбара

10

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

11

Расчитываем ширину нативногоскроллбара

DHTML: offsetWidth

Δ = offsetWidth - clientWidth

12

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

13

Максимально свободная кастомизация<div class="clipper">

<div class="scroller">

Content

</div>

</div>

01.

02.

03.

04.

05.

14

Минимальное вмешательство в DOM• Атрибуты data-*

• Самые необходимые инлайн-стили

• Максимизация управления UI через CSS

15

Максимальное использование CSS• Барон знает о:

DOM-элементах; CSS-классах; событиях; координатах

• Барон ничего не знает о:

opacity; linear-gradient; box-shadow; position

...и других свойствах CSS

16

Оптимизация кодаwidth = scroller.offsetWidth

height = scroller.offsetHeight

offset = ['offsetWidth', 'offsetHeight']

size = scroller[offset[direction]]

01.

02.

03.

04.

17

Независимость$: 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

Расширяемость плагинами$('.clipper').

baron().fix().pull().controls().test().

dispose();

01.

02.

03.

19

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

20

Плагин 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;

}

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

$('.clipper_fix').baron({

}).fix({

CSS

Плагин 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'

});

22

CSS

html

$('.clipper_fix').baron({

}).fix({

}).controls({

Плагин 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()

Плагин pull

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'

24

}).test()

}).pull({

$('.clipper_fix').baron({

}).fix({

}).controls({

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

25

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

Что можно сравнитьBaron jScrollPane

Общий размер (gzip, kB) 2.11 + 4.47 4.52 + 30.1

DOM 0 +9

Расположение скроллбара Свободное Фиксированное

Механизм Нативный Эмуляция

Поддержка overflow: scroll все браузеры

Быстрый старт Сложнее Просто

28

1. Зачем кастомизировать скроллбар?

2. Способы кастомизации

3. Барон: идея и принципы построения

4. Плагины барона

5. Сравнение барона с альтернативой

6. Туториал по использованию

29

HTML<div class="clipper">

<div class="scroller">

Content

</div>

</div>

<div class="scroller__bar"></div>

01.

02.

03.

04.

05.

06.

30

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

Код$('.profit').baron({

scroller: '.scroller',

bar: $('.profit .scroller__bar'),

barOnCls: 'baron'

});

01.

02.

03.

04.

05.

32

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 ofthe "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

Итого• Свободная CSS-кастомизация скроллбара

• Автоматическая поддержка всего где есть overflow: scroll

• Fallback - нативный скроллбар

• Размер с зависимостями: от 6 кБ в gzip

• Система плагинов + 4 плагина в коробке

34

Работает на API 2GISЛицензионное соглашение

Видимые на карте рейтинг Открыто

Учителей, 6Пив & Ко, сеть магазинов разливного пива

34 филиала

8 отзывов

Серафимы Дерябиной, 43аЖивое Разливное, магазин разливного пива

1 отзыв

Луначарского, 81Пивная лавка, сеть магазинов

10 филиалов

3 отзыва

Ляпустина, 8Beerlife, сеть магазинов живого пива

6 филиалов

3 отзыва

Пальмиро Тольятти, 19Пивная коллекция, магазин разливного пива

2 филиала

4 отзыва

Сыромолотова, 16BeerHall, сеть магазинов разливного пива

15 филиалов

Организации 506 Расширенный поиск

Справочник Проезд

пиво

35

В планах• Плагин для мега-быстрого старта

• Плагин для ликвидации зависимостей

• Ваши идеи?

• Автоматическое тестирование

36

Автотесты (Phantom JS)

37

• Прогон всех тестов при коммите

• Отнимает 3-5 секунд + 5 минут просмотра тестов в реальных

браузерах

• Невозможно просмотреть или забыть тест

About

Кузнецов Дмитрий, разработчик интерфейсов 2GIS Online

dm.kuznecov@2gis.ru

github.com/Diokuz/baron

habrahabr.ru/company/2gis

38