Вертикальная прокрутка fakeScroll

С одной стороны полосу прокрутки можно оформить средствами CSS, но это поддерживается не во всех браузерах и уровень настроек сильно ограничен.

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

fakeScroll — очень легкий скрипт (4.1кб) для стилизации вертикальной полосы прокрутки без использования библиотек. А только это в основном и требуется, например, для оформления ограниченного по высоте блока с большим количеством информации.

Примеры:

Внешняя полоcа прокрутки

Внутренняя полоса прокрутки

Установка:

Добавляем на сайт скрипт fakeScroll.js и его стили

И подключаем к блокам:

Настройки:

Название Тип По умолчанию Описание
classname String "" Имя класса, которое добавляется к полосе прокрутки.
track Boolean/String false Включает отслеживание события при клике на дорожку. Используйте smooth для плавного перехода

Описание классов:

fakeScroll__wrap — обертка для блока со скроллом

fakeScroll__content — содержание блока со скроллом

fakeScroll__track — дорожка, по которой перемещается ползунок прокрутки

fakeScroll__bar — сам ползунок

fakeScroll--grabbed — ползунок в зажатом состоянии

fakeScroll на github.com

Смотрите также:

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Джесси:

    Привет!

    При таком подключении:

        document.querySelector('.scroll-outside').fakeScroll();
        document.querySelector('.scroll-inside').fakeScroll({
            track : "smooth"
        });
    

    Выдаёт ошибку в консоль. А если сделать так:

        document.querySelector('.scroll-outside').fakeScroll({
            track : "smooth"
        });
    

    В чём может быть загвоздка ?)

    Ответить
    • Джесси:

      Во втором варианте работает и ошибку не выдаёт))

      Ответить
    • Alexander:

      А какая ошибка?
      У меня подключено

      document.querySelector('.scroll-outside').fakeScroll();
      document.querySelector('.scroll-inside').fakeScroll({
        track : "smooth"
      });

      И нормально вроде, ошибок нет.

      Ответить