Pull to refresh

Вертикальный скрол c краткой информацией.

Reading time 1 min
Views 2.2K
Когда то давно, не помню где я читал о том, что обычный скрол можно сделать более функциональным и предлагалось ряд решений.
Мне эти идеи понравились и вот спустя много лет :)…
Предлагаю свою реализацию на javascripte. Идея в том чтобы на фоне скрола показывать эскиз всего текста, а с помощью движка скрола видимую часть текста. При таком подходе сразу видно где находится картинка, заголовок, а где параграф.

Данной реализации на javascripte я не встречал да и честно сказать и не искал, люблю делать все своими руками :).

Инициализация происходит просто как в танке :). Создаем объект скрола передав в него id или сам блок (div) в конструктор и опции.
В опциях можно указать:
step — шаг скролинга в px по умолчанию 50
keyEvent — Слушать клавиши Home, End, Page Up, Page Down по умолчанию включено

var scrolPanel = new scroll.ScrollPanel('test',o);


Демо можно посмотреть здесь исходники можно скачать тут

Все это безобразие было сделано на основе собственного велосипеда, по этому я сделал версию в которой сняты все лишние детали, спресовано и засунуто в одну коробку. Этот файл вы найдет в архиве под именем scroll-full.js также в этом файле добавлена возможность создавать скрол с помощью jQuery если он у вас подключен, вот так $('#test').scrollPanel(o);
Tags:
Hubs:
+85
Comments 85
Comments Comments 85

Articles