CleverScrollbar.js — Сайдбар для зрозумілою навігації

Для тих, кому хочеться відразу подивитися, про що йдеться: приклад роботи бібліотеки. Натисніть на кнопку "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>

Ну, також ще можу зауважити, що бібліотека автоматично додає кожному блоку класи виду
.clererscroll--block-1
,
.clererscroll--block-n
, на які ви теж можете навісити свої власні стилі, щоб змінити зовнішній вигляд кожного блоку.

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-завантажувачі — але знову ж, тоді б розмір кінцевого білду виріс би на якусь кількість кілобайт, чого мені не дуже-то й хочеться.
Власне, ось. Такі справи. Начебто я закінчив. Звичайно ж, мені буде цікаво дізнатися думки інших людей на цю тему :) І ще більш цікаво буде дізнатися про те, що хтось десь реалізує на якомусь з сайтів.
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.