npm package: Tiny JS Library for scrolls https://own-scrolls.ff99cc.art/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
freak from the computer club a66e3035be Merge pull request 'Merge pull request 'Создал(а) '.domains'' (#20) from fftcc-patch-1 into main' (#21) from patch-1 into main 1 month ago
.vscode release 1.0.0-rc 5 months ago
demo demo: create Progressbar 5 months ago
modules feat: create Progressbar 5 months ago
.editorconfig release 1.0.0-rc 5 months ago
.eslintignore tiny fix 5 months ago
.eslintrc.json release 1.0.0-rc 5 months ago
.gitignore redesign demo site 5 months ago
.npmignore release 1.0.0-rc 5 months ago
.prettierignore config build for min files 5 months ago
.prettierrc.json release 1.0.0-rc 5 months ago
CHANGELOG.md Изменил(а) на 'CHANGELOG.md' 5 months ago
CONTRIBUTING.md create CONTRIBUTING.md 5 months ago
LICENSE.md release 1.0.0-rc 5 months ago
README.md Изменил(а) на 'README.md' 4 months ago
index.js feat: create Progressbar 5 months ago
package-lock.json redesign demo site 5 months ago
package.json feat: create Progressbar 5 months ago
webpack.config.js config build for min files 5 months ago

README.md



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

npm NPM npm bundle size npm



Buy an avid coffee lover a cup of coffee !

More coin...





Repo: git.disroot.org



DEMO SITE



You can try new test features in the package: test-own-scrolls latest versions with label -feat



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.