Pull to refresh

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

Reading time1 min
Views9K
Добрый день, Хабр!

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

image

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

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

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

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

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

За сим, надеюсь, что этот очерк лишним не будет.
Tags:
Hubs:
+21
Comments44

Articles