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

Примеры:

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

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

Установка:

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

Скачать: fakescroll.js
Скачать: fakescroll.min.js
Скачать: fakescroll.css

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

<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>

<h3>Внешняя полоcа прокрутки</h3>

</div>

<h3>Внутренняя полоса прокрутки</h3>

</div>

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

Анна: 31.07.2023 в 20:37

Одновременно два скролла не работали на странице, помогло вот такое решение:
[code]<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();
}

[/code]

Ответить
Джесси: 07.09.2019 в 08:17

Привет!

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

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

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

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

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

Ответить
- Джесси: 07.09.2019 в 08:17
  
  Во втором варианте работает и ошибку не выдаёт))
  
  Ответить
- Alexander: 08.09.2019 в 10:28
  
  А какая ошибка?
  У меня подключено
  [code]document.querySelector('.scroll-outside').fakeScroll();
  document.querySelector('.scroll-inside').fakeScroll({
  track : "smooth"
  });[/code]
  И нормально вроде, ошибок нет.
  
  Ответить