- PVSM.RU - https://www.pvsm.ru -
Для тех, кому хочется сразу посмотреть, о чём идёт речь: пример работы библиотеки [1]. Нажмите на кнопку "Load Scrollbar!", чтобы увидеть результат.
Я давно хотел реализовать эту небольшую идею для того, чтобы дать другим людям пищу для размышления о том, как можно сделать более удобной навигацию по контенту на страницах сайта.
Есть одна проблема с юзабилити на подавляющем большинстве сайтов, которая меня сильно раздражает. Суть проблемы заключается в том, что ты не имеешь возможности узнать, сколько процентов от всего контента на странице занимает, собственно, самая важная его часть. Или, если на сайте есть множество блоков, идущих один за другим — ты не имеешь возможности быстро переключаться между ними.
Есть как минимум две типичных ситуации, в которых было бы полезно иметь небольшую панельку в правой части браузера, которая бы показывала, где мы находимся, сколько осталось скроллить до конца текущего блока, а также какие ещё блоки на данной странице имеются с возможностью перейти к ним.
Первая ситуация: сайты вроде Хабрахабра. Статья хабра — это всегда контент + комментарии. Меня лично в первую очередь интересует контент статьи. Когда я начинаю читать, первый вопрос, который у меня возникает: а сколько ещё осталось читать до того момента, когда статья закончится? Вот сейчас у меня ползунок находится в положении 15% от всей страницы. А сколько комментариев уже написано к ней? Пока не проскроллишь в самый конец статьи — не узнаешь… И приходится скроллить.
Другая версия этого варианта — это ситуации, в которых хочется сразу почитать мнения других людей о статье. Так сказать, оценить, есть ли смысл вообще её читать. Было бы удобно иметь возможность перейти сразу на блок с комментариями.
Вторая ситуация: различные интернет-магазины и лендинги, у которых страница делится на различные информационные блоки, между которыми тоже по-хорошему бы перемещаться как-то быстрее.
В общем, думал-думал, да надумал. Встречайте библиотечку, решающую данные проблемы.
Это простой сайдбар, рядом со скроллбаром, который помогает пользователю с навигацией. Это не замена основному скроллбару, как может показаться из названия. Это скорее небольшое к нему дополнение.
Ещё раз ссылка на пример [1], для желающих посмотреть.
Если навести курсор на полоску, то она развернётся и покажет названия блоков страницы. Клик по блоку перенаправляет на него.
<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
, на которые вы тоже можете навесить свои собственные стили, чтобы изменить внешний вид каждого блока.
Если ваш сайт динамически изменяет свой контент во время работы, используйте метод CleverScrollbar.reload()
для того чтобы библиотека также обновила свою панельку с навигацией.
Выполните команду CleverScrollbar.stop()
для отключения библиотеки. Вы также можете вернуть её обратно позднее.
Собственно — это всё. Больше пока что библиотека ничего делать не умеет.
Библиотека написана на основе менеджера пакетов JSPM и асинхронного загрузчика модулей SystemJS, а также на основе туториала по JSPM 0.17 Beta [2], в котором также приводятся рекомендации по сборке [3] и публикации [4] независимых библиотек в Интернете.
Библиотека не имеет каких-либо сторонних зависимостей типа jQuery. Её размер в минифицированном виде занимает 4кб. Исходный код [5] написан с использованием некоторых возможностей ES5. Я старался разбить всё по небольшим независимым файлам, чтобы другие люди, при желании, могли без проблем изучить её код.
Также примечательно, что изначально я использовал ES5-класс для написания основной логики работы библиотеки, но впоследствии, когда увидел, что JSPM добавляет в конечный билд какие-то дополнительные функции из Babel'а для поддержки классов и увеличивает размер библиотеки на десяток килобайт, я переписал код на использование обычной new function() { ... }
вместо класса. Так тоже вполне нормально работает, особой разницы нету :)
Возможно, библиотека не будет корректно работать в старых браузерах типа Internet Explorer 8-10 — ещё не проверял, как она там себя ведёт.
Также, следует заметить, что стили библиотеки загружаются в браузер небольшим кодом на яваскрипте [6]. Просто для удобства, чтобы людям меньше было делать движений руками. Можно было также загружать эти стили через SystemJS-загрузчики — но опять же, тогда бы размер конечного билда вырос бы на какое-то количество килобайт, чего мне не очень-то и хочется.
Собственно — вот. Такие дела. Вроде бы я закончил. Конечно же, мне будет интересно узнать мнения других людей на эту тему :) И ещё более интересно будет узнать о том, что кто-то где-то реализует на каком-то из сайтов.
Автор: saggid
Источник [7]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/209646
Ссылки в тексте:
[1] пример работы библиотеки: https://believer-ufa.github.io/clever-scrollbar/
[2] JSPM 0.17 Beta: http://jspm.io/0.17-beta-guide/index.html
[3] сборке: http://jspm.io/0.17-beta-guide/static-builds-with-rollup-optimization.html
[4] публикации: http://jspm.io/0.17-beta-guide/publishing.html
[5] Исходный код: https://github.com/believer-ufa/clever-scrollbar/tree/master/src
[6] небольшим кодом на яваскрипте: https://github.com/believer-ufa/clever-scrollbar/blob/master/src/styles.js
[7] Источник: https://habrahabr.ru/post/315186/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best
Нажмите здесь для печати.