Примеры:
Внешняя полоcа прокрутки
Внутренняя полоса прокрутки
Установка:
Добавляем на сайт скрипт fakeScroll.js и его стили
- Скачать: fakescroll.js
- Скачать: fakescroll.min.js
- Скачать: fakescroll.css
И подключаем к блокам:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="fakeScroll scroll-outside"> <h3>Внешняя полоcа прокрутки</h3> </div> <div class="fakeScroll scroll-inside"> <h3>Внутренняя полоса прокрутки</h3> </div> <script> document.querySelector('.scroll-outside').fakeScroll(); document.querySelector('.scroll-inside').fakeScroll({ track : "smooth" }); </script> |
Настройки:
| Название | Тип | По умолчанию | Описание |
|---|---|---|---|
| classname | String | "" | Имя класса, которое добавляется к полосе прокрутки. |
| track | Boolean/String | false | Включает отслеживание события при клике на дорожку. Используйте smooth для плавного перехода |
Описание классов:
fakeScroll__wrap — обертка для блока со скроллом
fakeScroll__content — содержание блока со скроллом
fakeScroll__track — дорожка, по которой перемещается ползунок прокрутки
fakeScroll__bar — сам ползунок
fakeScroll--grabbed — ползунок в зажатом состоянии
fakeScroll на github.com
Одновременно два скролла не работали на странице, помогло вот такое решение:
<div class="fakeScroll scroll-outside">Блок 1</div> <div class="fakeScroll scroll-inside"> Блок 2</div> var fakeScrolls = document.querySelectorAll('.fakeScroll'); for (var i = 0; i < fakeScrolls.length; ++i) { fakeScrolls[i].fakeScroll(); }Привет!
При таком подключении:
document.querySelector('.scroll-outside').fakeScroll(); document.querySelector('.scroll-inside').fakeScroll({ track : "smooth" });Выдаёт ошибку в консоль. А если сделать так:
document.querySelector('.scroll-outside').fakeScroll({ track : "smooth" });В чём может быть загвоздка ?)
Во втором варианте работает и ошибку не выдаёт))
А какая ошибка?
У меня подключено
document.querySelector('.scroll-outside').fakeScroll(); document.querySelector('.scroll-inside').fakeScroll({ track : "smooth" });И нормально вроде, ошибок нет.