Кастомный Скроллбар, Плавная прокрутка, Скролл до секции, Попиксельный скролл, Прогресс Бар, Кнопка Вверх

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

⚠️ ⚠️ ⚠️ В версии 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();
        

Параметр 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 */