Кастомизация скроллбара
Кузнецов ДмитрийРазработчик интерфейсов 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.    wheelDelt...
Изменение размеров
Изменение контента
Много фиксируемых заголовков
Мало контента
Повторная инициализация   data-baron-inited="true"
Горизонтально?dir = {    pos: left,    size: width    client: clientWidth,    offset: offsetWidth    ...}bar[dir.pos] = ...;
Выводы1. Сменили дизайн2. Сохранили механику3. Отвязались от jQuery4. Уложились в 1.5 кб5. «Гореть вам в аду!» – радио Маяк
Barondiokuz.github.com/baron - демоgithub.com/Diokuz/baron - последняя версияhabrahabr.ru/company/2gis/blog - статьяmoskva...
Демонстрация
Спасибо за внимание
Произвольная смена дизайна системного скроллбара
Upcoming SlideShare
Loading in …5
×

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

1,141 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,141
On SlideShare
0
From Embeds
0
Number of Embeds
166
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

  1. 1. Кастомизация скроллбара
  2. 2. Кузнецов ДмитрийРазработчик интерфейсов 2ГИС
  3. 3. Осознание потребности
  4. 4. Windows XP
  5. 5. Контрастная тема
  6. 6. CSSТолько в браузерах на webkit.scroller::-webkit-scrollbar { width: 0;}
  7. 7. Дизайн и механизм Совершенно разные вещи!
  8. 8. over 43 jQuery plugins Более 43 решений
  9. 9. Шаблонный подход
  10. 10. $(‘scroll’).сделайХорошо();
  11. 11. Без jQuery$(’.scroll’).baron();baron({ dom: bonzo, event: bean, selector: qwery});
  12. 12. Прячем системный скроллбар
  13. 13. Рисуем свой скроллбар
  14. 14. Фиксируем (заголовки)fixFlag = [ 1, 1, 2, 3 ]// Лезем в DOM только при необходимости!
  15. 15. Пробрасываем событиеtry { e = document.createEvent(WheelEvent); e.initWebKitWheelEvent(e.originalEvent. wheelDeltaX, e.originalEvent.wheelDeltaY ); scroller.dispatchEvent(e); event.preventDefault();} catch (exception) {};
  16. 16. Изменение размеров
  17. 17. Изменение контента
  18. 18. Много фиксируемых заголовков
  19. 19. Мало контента
  20. 20. Повторная инициализация data-baron-inited="true"
  21. 21. Горизонтально?dir = { pos: left, size: width client: clientWidth, offset: offsetWidth ...}bar[dir.pos] = ...;
  22. 22. Выводы1. Сменили дизайн2. Сохранили механику3. Отвязались от jQuery4. Уложились в 1.5 кб5. «Гореть вам в аду!» – радио Маяк
  23. 23. Barondiokuz.github.com/baron - демоgithub.com/Diokuz/baron - последняя версияhabrahabr.ru/company/2gis/blog - статьяmoskva.fm - проклятие
  24. 24. Демонстрация
  25. 25. Спасибо за внимание

×