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

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

Время на прочтение1 мин
Количество просмотров2.3K
Когда то давно, не помню где я читал о том, что обычный скрол можно сделать более функциональным и предлагалось ряд решений.
Мне эти идеи понравились и вот спустя много лет :)…
Предлагаю свою реализацию на 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);
Теги:
Хабы:
Всего голосов 91: ↑88 и ↓3+85
Комментарии85

Публикации

Истории

Работа

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

27 августа – 7 октября
Премия digital-кейсов «Проксима»
МоскваОнлайн
11 сентября
Митап по BigData от Честного ЗНАКа
Санкт-ПетербургОнлайн
14 сентября
Конференция Practical ML Conf
МоскваОнлайн
19 сентября
CDI Conf 2024
Москва
24 сентября
Конференция Fin.Bot 2024
МоскваОнлайн
25 сентября
Конференция Yandex Scale 2024
МоскваОнлайн
28 – 29 сентября
Конференция E-CODE
МоскваОнлайн
28 сентября – 5 октября
О! Хакатон
Онлайн
30 сентября – 1 октября
Конференция фронтенд-разработчиков FrontendConf 2024
МоскваОнлайн