Как стилизованы полосы прокрутки в новом пользовательском интерфейсе Документов Google (особенно кнопки со стрелками)?

В новом пользовательском интерфейсе Документов Google есть классные серые полосы прокрутки.

Screenshot of the Google Docs UI

Это обычные полосы прокрутки, стилизованные под такие селекторы, как :: - webkit-scrollbar-thumb . Что приятно и доступно.

Однако я не могу заставить появиться кнопки со стрелками (обведены на скриншоте). Инспектор не показывает никаких соответствующих элементов DOM или какого-либо специального CSS. Итак, возникает вопрос , как создаются эти настраиваемые полосы прокрутки, включая кнопки со стрелками?

Пожалуйста, ознакомьтесь с этой скрипкой .

Изменить:

Похоже, что не все правила CSS отображаются в Инспекторе.

В частности, вам понадобятся :: - webkit-scrollbar-button: vertical: декремент и :: - webkit-scrollbar-button: vertical: increment , и их горизонтальные эквиваленты.

См. новую скрипку (обновлено 27 апреля 2012 г.).

23
задан Anton Strogonoff 27 April 2012 в 12:21
поделиться