Кастомный Скроллбар, Плавная прокрутка, Скролл до секции, Попиксельный скролл, Прогресс Бар, Кнопка Вверх
Установить
npm i own-scrolls --save
⚠️ ⚠️ ⚠️ В версии 2.0.0-rc параметр anchorButton был заменён на anchorLink
⚠️ Некоторые не популярные браузеры не поддерживают поведение smooth
пример использования:
// Импортировать модуль ScrollToSection
import { ScrollToSection } from 'own-scrolls';
// Создать инстанс
// Передать в параметр "anchorButton" селектор класса или тега кнопки(якоря)
// Передать в параметр "anchorSection" селектор класса или тега секции до которой необходимо переместиться по клику на кнопку
const instanceOne = new ScrollToSection({
anchorLink: '#button1',
anchorSection: '#section1',
horizontal: 'end',
behavior: 'smooth',
})
// Вызвать константу instanceOne с методом setEventListeners
instanceOne.setEventListeners();
const instanceTwo = new ScrollToSection({
anchorLink: '#button2',
anchorSection: '#section2',
horizontal: 'center',
vertical: 'center',
behavior: 'auto',
});
instanceTwo.setEventListeners();
const instanceThree = new ScrollToSection({
anchorLink: '.button',
anchorSection: '.section',
alignToTop: true,
});
instanceThree.setEventListeners();
Принимает значения:
true , верхняя граница элемента будет выровнена по верху видимой области прокрутки. Соответствует:
{
horizontal: "start",
vertical: "nearest"
}
false , нижняя граница элемента будет выровнена по низу видимой области прокрутки. Соответствует:
{
horizontal: "end",
vertical: "nearest"
}
Анимация прокрутки. Принимает значения "auto" или "smooth"
Горизонтальное выравнивание. Одно из значений: "start" , "center" , "end" или "nearest"
Вертикальное выравнивание. Одно из значений: "start" , "center" , "end" или "nearest"
пример использования:
// Импортировать модуль ScrollBy
import { ScrollBy } from 'own-scrolls';
// Создать инстанс
// Передать в параметр "y" число, являющееся количесвом пикселей
// Передать в параметр "button" селектор класса или тега секции по клику на которую будет происходить скролл
const instanceDown = new ScrollBy({
y: -100,
x: 0, // Если параметр равняется нуля, передавать его не обязательно
button: '.button-down'
})
// Вызвать константу instanceDown с методом setEventListeners
instanceDown.setEventListeners();
const instanceUp = new ScrollBy({
y: 100,
button: '.button-up'
})
instanceUp.setEventListeners();
// Аналогично задаётся скролл влево\вправо изменяя значение "x"
пример использования:
// Импортировать модуль ScrollBar import { ScrollBar } from 'own-scrolls'; // Создать инстанс const scrollbar = new ScrollBar(); // Вызвать константу scrollbar с методом setEventListeners scrollbar.setEventListeners();
ScrollBar
во входной JS файл, перед импортом собственных стилей, так как модуль ScrollBar
содержит в себе дефолтные стили. Это необходимо чтобы иметь возможность перезаписать дефолтные стили на собственные.пример:
index.js
import { ScrollBar } from 'own-scrolls';
import './index.css';
...
/* some js code */
Следом необходимо написать в собственном CSS файле селекторы: .scroll__container
и .scroll__indicator
и задать стили на своё усмотрение.
Некоторые свойства содержат переменные, значения переменных задаются в root
/* some css code */
...
.scroll__container {
background: rgba(90, 90, 90, 0.2);
transition: var(--smooth-scroll);
}
.scroll__indicator {
height: 0;
width: var(--width-scroll-indicator);
border-radius: 100vh;
background: linear-gradient(to top, red, blue);
transition: var(--smooth-scroll);
}
Если возникла необходимость изменить значение переменной, необходимо в собственной главном файле CSS написать селектор :root
(рекомендуется писать в самом начале файла) и внутри задавать значения необходимых переменных.
:root {
--width-scroll-container: 0.5vw;
--width-scroll-indicator: 0.5vw;
--smooth-scroll: 0.5s;
}
...
/* some css code */
Made with by
fftcc