vue-fade-scrollbar

Wrapper component that replaces the element's own scrollbar. The new scrollbar can auto-hide on various media queries, appear on hover content and doesn't affect the content. See here the Demo

NPM package: https://www.npmjs.com/package/vue-fade-scrollbar

Installation

npm install --save vue-fade-scrollbar

or

yarn add vue-fade-scrollbar

Import

Global Registration

import Vue from 'vue'
import VueFadeScrollbar from "./VueFadeScrollbar"

Vue.component('vue-fade-scrollbar', VueFadeScrollbar)

In Component Registration:

<template>
  ...
</template>
<script>
import VueFadeScrollbar from 'vue-fade-scrollbar'

export default {
  name: 'ComponentName',
  components: {
    VueFadeScrollbar,
    ...
  },
  ...
}
</script>

Not Using Webpack

If you don't use webpack (for example in CodePen etc):

<link rel="stylesheet" href="node-modules/vue-fade-scrollbar/distvue-fade-scrollbar.css" />
<script src="node-modules/vue-fade-scrollbar/dist/vue-fade-scrollbar.umd.js"></script>

and then you still need to register it:

Vue.component('vue-fade-scrollbar', VueFadeScrollbar)

Basic Usage

<template>
  <VueFadeScrollbar :visible="mediaQuery">
    ...
  </VueFadeScrollbar>
</template>

<script>
    export default {
        data: {
            mediaQuery: 'm-down',
        },
    }
</script>

Props

• visible (default: ''): media queries for scrollbar visibility

  name	value
  xs	min-width: 375px
  s	min-width: 480px
  m	min-width: 768px
  l	min-width: 1024px
  xl	min-width: 1440px
  xs-down	max-width: 374px
  s-down	max-width: 479px
  m-down	max-width: 767px
  l-down	max-width: 1023px
  xl-down	min-width: 1439px
  xl-down	max-width: 1439px

• thumb (type: Object). Thumb properties:

  property	type	default	description
  thikness	string	10px	thumb width
  left	string	1px	thumb left indent inside the track
  right	string	1px	thumb right indent inside the track
  radius	string	0	thumb border-radius
  color	string	#c7ccd1	thumb color
  hoverColor	string	#8f99a3	thumb color on hover
  activeColor	string	#666666	thumb active color

• thumbClasses (type: String, Array, Object, default: ''): custom classes for thumb

• trackColor (type: String, default: 'transparent')