14 November 2016

CleverScrollbar.js — Сайдбар для понятной навигации

JavaScriptProgramming

Для тех, кому хочется сразу посмотреть, о чём идёт речь: пример работы библиотеки. Нажмите на кнопку "Load Scrollbar!", чтобы увидеть результат.


Я давно хотел реализовать эту небольшую идею для того, чтобы дать другим людям пищу для размышления о том, как можно сделать более удобной навигацию по контенту на страницах сайта.


Есть одна проблема с юзабилити на подавляющем большинстве сайтов, которая меня сильно раздражает. Суть проблемы заключается в том, что ты не имеешь возможности узнать, сколько процентов от всего контента на странице занимает, собственно, самая важная его часть. Или, если на сайте есть множество блоков, идущих один за другим — ты не имеешь возможности быстро переключаться между ними.


Есть как минимум две типичных ситуации, в которых было бы полезно иметь небольшую панельку в правой части браузера, которая бы показывала, где мы находимся, сколько осталось скроллить до конца текущего блока, а также какие ещё блоки на данной странице имеются с возможностью перейти к ним.


Первая ситуация: сайты вроде Хабрахабра. Статья хабра — это всегда контент + комментарии. Меня лично в первую очередь интересует контент статьи. Когда я начинаю читать, первый вопрос, который у меня возникает: а сколько ещё осталось читать до того момента, когда статья закончится? Вот сейчас у меня ползунок находится в положении 15% от всей страницы. А сколько комментариев уже написано к ней? Пока не проскроллишь в самый конец статьи — не узнаешь… И приходится скроллить.


Другая версия этого варианта — это ситуации, в которых хочется сразу почитать мнения других людей о статье. Так сказать, оценить, есть ли смысл вообще её читать. Было бы удобно иметь возможность перейти сразу на блок с комментариями.


Вторая ситуация: различные интернет-магазины и лендинги, у которых страница делится на различные информационные блоки, между которыми тоже по-хорошему бы перемещаться как-то быстрее.


В общем, думал-думал, да надумал. Встречайте библиотечку, решающую данные проблемы.


CleverScrollbar.js


Это простой сайдбар, рядом со скроллбаром, который помогает пользователю с навигацией. Это не замена основному скроллбару, как может показаться из названия. Это скорее небольшое к нему дополнение.


Ещё раз ссылка на пример, для желающих посмотреть.


Если навести курсор на полоску, то она развернётся и покажет названия блоков страницы. Клик по блоку перенаправляет на него.


Установка


Загрузите библиотеку на вашу страницу


<script src="dist/clever-scrollbar.js"></script>

Можно также загрузить через стандарты ES5, AMD, и так далее.


npm i clever-scrollbar

Добавьте дополнительные атрибуты блокам, содержащим основной контент страницы


<body>

    <div class='head' data-content-block="Шапка сайта">...</div>

    <div class='article-content' data-content-block="Текст статьи">...</div>

    <div class='comments' data-content-block="Комментарии пользователей">...</div>

</body>

Выполните команду CleverScrollbar.load() после загрузки всего контента!


window.addEventListener("load", function() {
    CleverScrollbar.load()
})

Это всё что надо сделать.


Дополнительные классы


Если вам нужно установить для одного из элементов сайдбара какие-то доп. классы, вы всегда можете сделать это через дополнительный атрибут:


<div
    class='article-content'
    data-content-block="Article text"
    data-content-block-classes='main-content-block other-class'
>...</div>

Ну, также ещё могу заметить, что библиотека автоматически добавляет каждому блоку классы вида .cleverscroll--block-1, .cleverscroll--block-n, на которые вы тоже можете навесить свои собственные стили, чтобы изменить внешний вид каждого блока.


upd: теперь также для текущего активного блока добавляется класс cleverscroll--block-active.


SPA и Ajax приложения


Если ваш сайт динамически изменяет свой контент во время работы, используйте метод CleverScrollbar.reload() для того чтобы библиотека также обновила свою панельку с навигацией.


Остановка


Выполните команду CleverScrollbar.stop() для отключения библиотеки. Вы также можете вернуть её обратно позднее.




Собственно — это всё. Больше пока что библиотека ничего делать не умеет.


Подробности о реализации


Библиотека написана на основе менеджера пакетов JSPM и асинхронного загрузчика модулей SystemJS, а также на основе туториала по JSPM 0.17 Beta, в котором также приводятся рекомендации по сборке и публикации независимых библиотек в Интернете.


Библиотека не имеет каких-либо сторонних зависимостей типа jQuery. Её размер в минифицированном виде занимает 4кб. Исходный код написан с использованием некоторых возможностей ES5. Я старался разбить всё по небольшим независимым файлам, чтобы другие люди, при желании, могли без проблем изучить её код.


Также примечательно, что изначально я использовал ES5-класс для написания основной логики работы библиотеки, но впоследствии, когда увидел, что JSPM добавляет в конечный билд какие-то дополнительные функции из Babel'а для поддержки классов и увеличивает размер библиотеки на десяток килобайт, я переписал код на использование обычной new function() { ... } вместо класса. Так тоже вполне нормально работает, особой разницы нету :)


Возможно, библиотека не будет корректно работать в старых браузерах типа Internet Explorer 8-10 — ещё не проверял, как она там себя ведёт.


Также, следует заметить, что стили библиотеки загружаются в браузер небольшим кодом на яваскрипте. Просто для удобства, чтобы людям меньше было делать движений руками. Можно было также загружать эти стили через SystemJS-загрузчики — но опять же, тогда бы размер конечного билда вырос бы на какое-то количество килобайт, чего мне не очень-то и хочется.


Собственно — вот. Такие дела. Вроде бы я закончил. Конечно же, мне будет интересно узнать мнения других людей на эту тему :) И ещё более интересно будет узнать о том, что кто-то где-то реализует на каком-то из сайтов.

Tags:юзабилитинавигация по сайту
Hubs: JavaScript Programming
+31
8.6k 75
Comments 28