**Custom scrollbar, Progressbar, Smooth scroll to section, Scroll by pixels**
[](https://www.npmjs.com/package/own-scrolls)  
 [](https://www.jsdelivr.com/package/npm/own-scrolls)
#### Buy an avid coffee lover a cup of coffee !
[](https://codeberg.org/fftcc/Buy-me-a-coffee/src/main/btc/btc.md)
[](https://codeberg.org/fftcc/Buy-me-a-coffee/src/main/trx/trx.md)
[](https://codeberg.org/fftcc/Buy-me-a-coffee/src/main/xmr/xmr.md)
[](https://codeberg.org/fftcc/Buy-me-a-coffee/src/main/eth/eth.md)
[**More coin...**](https://codeberg.org/fftcc/Buy-me-a-coffee/src/main/Buy-me-a-coffee.md)
## **[DEMO WEBSITE](https://own-scrolls.ff99cc.art)**
**Install**
```sh
npm i own-scrolls --save
```
# Eng
## Scroll to section
> ⚠️ ⚠️ ⚠️ In version 2.0.0-rc, the `anchorButton` parameter was replaced with `anchorLink`
> ⚠️ Some non-popular browsers do not support behavior `smooth`
usage example:
```js
// Import ScrollToSection module
import { ScrollToSection } from 'own-scrolls';
// Create an instance
// Pass to the "anchorButton" parameter the selector of the class or tag of the button (anchor)
// Pass to the "anchorSection" parameter the selector of the class or tag of the section to which you need to move by clicking on the button
const instanceOne = new ScrollToSection({
anchorLink: '#button1',
anchorSection: '#section1',
horizontal: 'end',
behavior: 'smooth',
});
// Call the scrollToSectionInstanceOne constant with the setEventListeners method
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();
```
### **_Parameter `alignToTop`_** (Can set `behavior`)
Takes the values:
`true`, the upper border of the element will be aligned with the top of the visible scroll area. Match:
```
{
horizontal: "start",
vertical: "nearest"
}
```
`false`, the lower border of the element will be aligned to the bottom of the visible scroll area. Match:
```
{
horizontal: "end",
vertical: "nearest"
}
```
### **_Parameter `behavior`_**
Scrolling animation. Takes the values `"auto"` or `"smooth"`.
### **_Parameter `horizontal`_**
Horizontal alignment.
One of the values: `"start"`, `"center"`, `"end"` or `"nearest"`.
### **_Parameter `vertical`_**
Vertical alignment.
One of the values: `"start"`, `"center"`, `"end"` or `"nearest"`.
## Scroll by pixels
usage example:
```js
// Import ScrollBy module
import { ScrollBy } from 'own-scrolls';
// Create an instance
// Pass to the "y" parameter a number that is the number of pixels
// Pass to the "button" parameter the selector of the class or tag on clicking on which scrolling will occur
const instanceDown = new ScrollBy({
y: -100,
x: 0, // If the parameter is zero, it is not necessary to pass it
button: '.button-down'
})
// Call the instanceDown constant with the setEventListeners method
instanceDown.setEventListeners();
const instanceUp = new ScrollBy({
y: 100,
button: '.button-up'
})
instanceUp.setEventListeners();
// Similarly, the left\right scroll is set by changing the value of "x"
```
## Custom Scrollbar
usage example:
```js
// Import ScrollBar module
import { ScrollBar } from 'own-scrolls';
// Create an instance
const scrollbar = new ScrollBar();
// Call the scrollbar constant with the setEventListeners method
scrollbar.setEventListeners();
```
### Styles:
- It is necessary to import the `ScrollBar` module in the entry file JS, before importing your own styles, since the `ScrollBar` module contains default styles. This is necessary to be able to overwrite the default styles with your own.
example:
index.js
```js
import { ScrollBar } from 'own-scrolls';
import './index.css';
...
/* some js code */
```
- Next, you need to write selectors in your own CSS file: `.scroll__container` and `.scroll__indicator` and set styles at your discretion.
### Default styles:
Some properties contain variables, the values of variables are set in root.
```css
...
/* 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);
}
```
If there is a need to change the value of a variable, you need to write the selector `:root` in your own main CSS file (it is recommended to write at the very beginning of the file) and set the values of the necessary variables inside.
### Default values of variables:
```css
:root {
--width-scroll-container: 0.5vw;
--width-scroll-indicator: 0.5vw;
--smooth-scroll: 0.5s;
}
...
/* some css code */
```
## Progressbar
usage example:
```js
// Import ProgressBar module
import { ProgressBar } from 'own-scrolls';
// Create an instance
const progressbar = new ProgressBar();
// Call the progressbar constant with the setEventListeners method
progressbar.setEventListeners();
```
### Styles:
- It is necessary to import the `ProgressBar` module in the entry file JS, before importing your own styles, since the `ProgressBar` module contains default styles. This is necessary to be able to overwrite the default styles with your own.
example:
index.js
```js
import { ProgressBar } from 'own-scrolls';
import './index.css';
...
/* some js code */
```
- Next, you need to write selectors in your own CSS file: `.progress__container` and `.progress__indicator` and set styles at your discretion.
### Default styles:
Some properties contain variables, the values of variables are set in root.
```css
...
/* some css code */
...
.progress__container {
height: var(--height-progress-container);
background: rgba(90, 90, 90, 0.2);
}
.progress__indicator {
height: var(--height-progress-indicator);
width: 0;
background: linear-gradient(90deg, red, blue);
}
```
If there is a need to change the value of a variable, you need to write the selector `:root` in your own main CSS file (it is recommended to write at the very beginning of the file) and set the values of the necessary variables inside.
### Default values of variables:
```css
:root {
--height-progress-container: 1vh;
--height-progress-indicator: 1vh;
}
...
/* some css code */
```
# Rus
## Скролл до секции
> ⚠️ ⚠️ ⚠️ В версии 2.0.0-rc параметр `anchorButton` был заменён на `anchorLink`
> ⚠️ Некоторые не популярные браузеры не поддерживают поведение `smooth`
пример использования:
```js
// Импортировать модуль ScrollToSection
import { ScrollToSection } from 'own-scrolls';
// Создать инстанс
// Передать в параметр "anchorLink" селектор класса или тега кнопки(якоря)
// Передать в параметр "anchorSection" селектор класса или тега секции до которой необходимо переместиться по клику на кнопку
const instanceOne = new ScrollToSection({
anchorLink: '#button1',
anchorSection: '#section1',
horizontal: 'end',
behavior: 'smooth',
});
// Вызвать константу scrollToSectionInstanceOne с методом 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();
```
### **_Параметр `alignToTop`_** (Можно задавать `behavior`)
Принимает значения:
`true`, верхняя граница элемента будет выровнена по верху видимой области прокрутки. Соответствует:
```
{
horizontal: "start",
vertical: "nearest"
}
```
`false`, нижняя граница элемента будет выровнена по низу видимой области прокрутки. Соответствует:
```
{
horizontal: "end",
vertical: "nearest"
}
```
### **_Параметр `behavior`_**
Анимация прокрутки. Принимает значения `"auto"` или `"smooth"`.
### **_Параметр `horizontal`_**
Горизонтальное выравнивание.
Одно из значений: `"start"`, `"center"`, `"end"` или `"nearest"`.
### **_Параметр `vertical`_**
Вертикальное выравнивание.
Одно из значений: `"start"`, `"center"`, `"end"` или `"nearest"`.
## Попиксельный скролл
пример использования:
```js
// Импортировать модуль 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"
```
## Кастомный Скроллбар
пример использования:
```js
// Импортировать модуль ScrollBar
import { ScrollBar } from 'own-scrolls';
// Создать инстанс
const scrollbar = new ScrollBar();
// Вызвать константу scrollbar с методом setEventListeners
scrollbar.setEventListeners();
```
### Стили:
- Необходимо импортировать модуль `ScrollBar` во входной JS файл, перед импортом собственных стилей, так как модуль `ScrollBar` содержит в себе дефолтные стили. Это необходимо чтобы иметь возможность перезаписать дефолтные стили на собственные.
пример:
index.js
```js
import { ScrollBar } from 'own-scrolls';
import './index.css';
...
/* some js code */
```
- Следом необходимо написать в собственном CSS файле селекторы: `.scroll__container` и `.scroll__indicator` и задать стили на своё усмотрение.
### Дефолтные стили:
Некоторые свойства содержат переменные, значения переменных задаются в root.
```css
...
/* 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` (рекомендуется писать в самом начале файла) и внутри задавать значения необходимых переменных.
### Дефолтные значения переменных:
```css
:root {
--width-scroll-container: 0.5vw;
--width-scroll-indicator: 0.5vw;
--smooth-scroll: 0.5s;
}
...
/* some css code */
```
## Прогрессбар
пример использования:
```js
// Импортировать модуль ProgressBar
import { ProgressBar } from 'own-scrolls';
// Создать инстанс
const progressbar = new ProgressBar();
// Вызвать константу progressbar с методом setEventListeners
progressbar.setEventListeners();
```
### Стили:
- Необходимо импортировать модуль `ProgressBar` во входной JS файл, перед импортом собственных стилей, так как модуль `ProgressBar` содержит в себе дефолтные стили. Это необходимо чтобы иметь возможность перезаписать дефолтные стили на собственные.
пример:
index.js
```js
import { ProgressBar } from 'own-scrolls';
import './index.css';
...
/* some js code */
```
- Следом необходимо написать в собственном CSS файле селекторы: `.progress__container` и `.progress__indicator` и задать стили на своё усмотрение.
### Дефолтные стили:
Некоторые свойства содержат переменные, значения переменных задаются в root.
```css
...
/* some css code */
...
.progress__container {
height: var(--height-progress-container);
background: rgba(90, 90, 90, 0.2);
}
.progress__indicator {
height: var(--height-progress-indicator);
width: 0;
background: linear-gradient(90deg, red, blue);
}
```
Если возникла необходимость изменить значение переменной, необходимо в собственной главном файле CSS написать селектор `:root` (рекомендуется писать в самом начале файла) и внутри задавать значения необходимых переменных.
### Дефолтные значения переменных:
```css
:root {
--height-progress-container: 1vh;
--height-progress-indicator: 1vh;
}
...
/* some css code */
```
Made with 
by fftcc.