Custom scrollbar, Progressbar, Smooth scroll to section, Scroll by pixels

Buy an avid coffee lover a cup of coffee !

More coin...

DEMO WEBSITE

Install

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:

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

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

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

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.

...
/* 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:

:root {
  --width-scroll-container: 0.5vw;
  --width-scroll-indicator: 0.5vw;
  --smooth-scroll: 0.5s;
}

...
/* some css code */

Progressbar

usage example:

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

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.

...
/* 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:

:root {
  --height-progress-container: 1vh;
  --height-progress-indicator: 1vh;
}

...
/* some css code */

Rus

Скролл до секции

⚠️ ⚠️ ⚠️ В версии 2.0.0-rc параметр anchorButton был заменён на anchorLink

⚠️ Некоторые не популярные браузеры не поддерживают поведение smooth

пример использования:

// Импортировать модуль 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".

Попиксельный скролл

пример использования:

// Импортировать модуль 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 */

Прогрессбар

пример использования:

// Импортировать модуль ProgressBar
import { ProgressBar } from 'own-scrolls';

// Создать инстанс
const progressbar = new ProgressBar();

// Вызвать константу progressbar с методом setEventListeners
progressbar.setEventListeners();

Стили:

• Необходимо импортировать модуль ProgressBar во входной JS файл, перед импортом собственных стилей, так как модуль ProgressBar содержит в себе дефолтные стили. Это необходимо чтобы иметь возможность перезаписать дефолтные стили на собственные.

пример:

index.js

import { ProgressBar } from 'own-scrolls';
import './index.css';

...
/* some js code */

• Следом необходимо написать в собственном CSS файле селекторы: .progress__container и .progress__indicator и задать стили на своё усмотрение.

Дефолтные стили:

Некоторые свойства содержат переменные, значения переменных задаются в root.

...
/* 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 (рекомендуется писать в самом начале файла) и внутри задавать значения необходимых переменных.

Дефолтные значения переменных:

:root {
  --height-progress-container: 1vh;
  --height-progress-indicator: 1vh;
}

...
/* some css code */

Made with by fftcc.