@vkdesktop/vue-scrolly NPM

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>