Как стать автором
Обновить

Вертикальный скроллинг содержимого страницы в стиле Mac OS X Lion

Время на прочтение1 мин
Количество просмотров9.1K
Добрый день, Хабр!

Не так давно я оставлял весьма категоричный комментарий в топике о модернизации скроллбаров а, буквально, через пару дней был вынужден сам решать задачу о его (скроллбара) модернизации. Так уж сложились звёзды, что в пользовательском интерфейсе одного из проектов стандартной полосе прокрутки место было найти можно, но крайне нежелательно. Из всех возможных вариантов было выбрано нечто среднее между скроллбаром нового Gmail'а, благо задачи похожи и Mac OS X Lion, потому что «ох, они круты ». Я вооружился js и jQuery, и на свет было произведено это.

image

Скрипт умеет: скроллить блок с определённым классом «screen», при условии, что он выходит за границы экрана путём перетаскивания бегунка или при повороте колеса мыши. Полоса прокрутки появляется при скроллинге колесом или при приближении курсора мыши к правой границе экрана. При изменении размеров окна, размер бегунка и его положение изменяются соответственно.

Для работы требует: jQuery и компоненту jQuery UI — draggable, а так же любой нормальный браузер (в IE8- работать, увы, не будет).

Проблемы не решённые в текущей версии: некорректная отработка при изменении масштаба текста.

В планах: избавиться от описанного в предыдущем пункте и от draggable, оформить в виде плагина jQuery, добиться работы в IE8- (основная проблема — отработка события onmousewheel), добавить функционал горбуновского инфоскроллера.

Ссылка на рабочий пример
Код, включение, стили и развешивание функций по событиям — в исходнике.

За сим, надеюсь, что этот очерк лишним не будет.
Теги:
Хабы:
Всего голосов 33: ↑27 и ↓6+21
Комментарии44

Публикации

Истории

Работа

Ближайшие события

Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн
Антиконференция X5 Future Night
Дата30 мая
Время11:00 – 23:00
Место
Онлайн
Конференция «IT IS CONF 2024»
Дата20 июня
Время09:00 – 19:00
Место
Екатеринбург
Summer Merge
Дата28 – 30 июня
Время11:00
Место
Ульяновская область