Произвольная смена дизайна системного скроллбара
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 920 views

 

Statistics

Views

Total Views
920
Views on SlideShare
781
Embed Views
139

Actions

Likes
0
Downloads
2
Comments
0

5 Embeds 139

http://devday.2gis.ru 64
http://devday.local 29
http://devday.ru 29
http://10.54.86.138 15
http://devday.2gis.my 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • Кастомизация скроллбара
  • Кузнецов ДмитрийРазработчик интерфейсов 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. wheelDeltaX, e.originalEvent.wheelDeltaY ); scroller.dispatchEvent(e); event.preventDefault();} catch (exception) {};
  • Изменение размеров
  • Изменение контента
  • Много фиксируемых заголовков
  • Мало контента
  • Повторная инициализация 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.fm - проклятие
  • Демонстрация
  • Спасибо за внимание