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>

    Ну, также ещё могу заметить, что библиотека автоматически добавляет каждому блоку классы вида .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-загрузчики — но опять же, тогда бы размер конечного билда вырос бы на какое-то количество килобайт, чего мне не очень-то и хочется.


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

    Поделиться публикацией
    Комментарии 28
      0
      А мне понравилось. Идея, как на меня, проста и хороша.
      Как на счет бесконечных списков?
        0

        Рад что вам понравилось) По идее, просто обновлять снова и снова панель по мере загрузки контента. Возможно, на совсем огромных списках и начнет подтормаживать, но так-то, там тормозить то нечему: кода строк на двести всего. Плюс, вычисление происходит только один раз, при загрузке, далее библиотека ничего более не вычисляет, пока вы ей явно не скажете обновиться.

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

        P.S. в демке хоть шрифт поменяйте, ну выглядит страничка так себе…
          0

          Ну, дизайн — не моя сильная сторона) Кстати, не знаю, на телефоне вроде тоже нормально) Это как идея и концепт больше.

            0
            Наоборот на мобильных устройствах, можно сделать так чтобы скроллбар отображался при свайпе от правого края, что будет намного удобнее
              0
              Свайпы от края часто резервируются браузерами. А-ля вперёд/назад.
            0
            Такая проблема действительно встречается периодически.
            Но я вот не хочу, Чтобы на моём сайте решение этой проблемы занимало 5 пикселей справа на всю высоту экрана. Сдаётся мне, что это решение больше подходит для мобильной версии при условии совмещения его с боковым меню типичным для андроид приложений.

            Если действительно есть желание потратить на это время, то я бы советовал двигаться в этом направлении.
              +1
              Отличная идея, полезный скрипт. Мне кажется, имеет смысл добавить доп. класс для активного блока.
                0
                  0
                  Спасибо, обновлюсь. Для своего сайта, где я его использовал, я выпилил CSS из скрипта, всё же это тоже не комльфо.
                    0

                    :) Это тоже не трудно было сделать.


                    Теперь можете писать вот так:


                    CleverScrollbar.load({
                      loadStyles : false
                    })
              –1
              Ерунда какая-то. Недостаточно .js Нужно больше .js Автор не слышал про html-якоря?
                0

                Ну да, я слышал что такое якоря. Только как они решают указанную мною проблему? Вы статью точно внимательно читали? Вот читаете вы статью какую-то очередную на хабре, находитесь где-то в её теле. Теперь вопрос: как вы с помощью html-якорей быстро узнаёте о том, сколько процентов от всей статьи вы в данный момент прочитали, и когда начнутся её комментарии?

                  –5
                  функционал ради функционала.

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

                  КГ/АМ
                    0
                    Теперь вопрос: как вы с помощью html-якорей быстро узнаёте о том, сколько процентов от всей статьи вы в данный момент прочитали, и когда начнутся её комментарии?

                    Теперь вопрос — зачем мне это знать?
                      0

                      потому что статья – это контент автора, а комменнарии – это что-то, написанное другими людьми.
                      Полезно иногда заранее знать, сколько именно занимает авторский контент, а не потенциальный флуд от читателей.


                      Это актуально не только на Хабре, но и в других блогах. Действительно бывает проблема понять, сколько именно полезного текста находится внизу.

                  0
                  А какой смысл в таком виде? Хотя бы переход вверх-вниз по клику был бы.
                    +1

                    Смысл в том что ты видишь карту блоков страницы) Переход вверх вниз — это как?

                      0
                      Я имею ввиду переход по странице. Просто видеть карту блоков как по мне мало, лучше сделать типа замены скролбара (т.е. чтобы нажатие на какой-то части блока вело к переходу в эту часть блока).
                        0

                        Так оно ведь сейчас так и работает) Клик по блоку перекидывает на начало этого самого блока. Попробуйте. Может просто не заметили.

                          0
                          Я не про переход в этот блок, а про переход в нужную часть блока. Ну вот нажали Вы на середину блока — и перевело отображение на эту середину блока. Самое просто, разбить каждый блок на n частей. И клик по каждой части будет вести на нужную часть блока.
                            0

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

                              0
                              Вот оно что. Я наверное что-то делаю не так, но у меня ни в FF, ни в Хроме не отображается на какой части страницы находится скролл — только показано соотношение размеров блоков.
                                0

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

                    +1
                    Как-то для решения подобных проблем я написал свою библиотеку viewport.js
                      0

                      Очень круто :) Спасибо за ссылку.

                      0

                      Классная штука. Его можно сделать тоньше, но более насыщенным.

                      Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                      Самое читаемое