@vkdesktop/vue-scrolly

vue-scrolly

Посмотрите на демо версию.

Особенности:

• Используется MutationObserver для моментального обновления скроллбара при изменении контента.
• К событиям wheel и touchmove добавляется параметр passive: true, что заметно повышает производительность.
• Поддержка вертикального и горизонтального скролла, которые автоматически отображаются когда нужно.
• Поддержка скролла с помощью тач событий и клавиатуры (Page Up/Down и стрелки).
• Поддержка скролла кликом либо перетаскиванием по полосе скроллбара.
• Горизонтальный скролл колесиком при зажатой клавише Alt.
• Скроллбар удобно перетаскивается даже на очень длинном контенте, ведь его минимальная длинна составляет 20% контента.
• По умолчанию скроллбар скрыт и показывается только при скролле, наведении на скроллбар и изменении контента.
• Данная библиотека разрабатывается главным образом для VK Desktop. Полноценная работа библиотеки гарантируется (но не ограничивается) на версиях Chrome 69+ и Electron 4.0.0+.

Установка

npm i @vkdesktop/vue-scrolly

Использование vue-scrolly

Для начала, импортируйте vue-scrolly в компонент:

import Scrolly from '@vkdesktop/vue-scrolly';

export default {
  components: {
    Scrolly
  },
  // Ваш код...
}

Затем, оберните нужный контент таким образом:

<Scrolly class="custom-scrolly-wrap" vclass="content-wrap">
  <!-- Ваш контент... -->
</Scrolly>

В самой верстке это будет выглядеть примерно так:

<div tabindex="1" class="custom-scrolly-wrap scrolly">
  <div class="scrolly-viewport content-wrap">
    <!-- Ваш контент... -->
  </div>
  <div class="scrolly-bar axis-y" style="..."></div>
  <div class="scrolly-bar axis-x" style="..."></div>
</div>

Параметры компонента Scrolly

Название	Описание	Тип	По умолчанию
vclass	Класс для врапа вашего контента	Vue class	""

События компонента Scrolly

Событие	Описание
scroll	Вызывается при изменении позиции скролла