vue-scroll-bar

a simple custom scrollbar vue component, it can support pc and mobile.

DEMO

Install

npm i vue-scroll-bar --save

Usage

<template>
   <scroll-bar class="warp" :scrollTrackStyle="scrollTrackStyle" :scrollBarStyle="scrollBarStyle">
      <div class="test">
        <p v-for="index in 6">
           item no {{index}}
        </p>
      </div>
   </scroll-bar>
</template>

import scrollBar from 'vue-scroll-bar';
export default {
    components: { scrollBar },
    data() {
      return {
        scrollTrackStyle: {
          backgroundColor: 'red'
        },
        scrollBarStyle: {
         ...
        }
      };
    }
};
<style>
.warp{
  height: 80px;
  overflow: hidden;
}
</style>

Props

Props	Type	Default	Description
scrollTrackStyle	Object	{}	the style of scroll track
scrollTrackYStyle	Object	scrollTrackStyle	the style of scroll track in the direction of Y axis
scrollTrackXStyle	Object	scrollTrackStyle	the style of scroll track in the direction of X axis
scrollBarStyle	Object	{}	the style of scroll bar
scrollBarYStyle	Object	scrollBarStyle	the style of scroll bar in the direction of Y axis
scrollBarXStyle	Object	scrollBarStyle	the style of scroll bar in the direction of X axis
barYMinHeight	Number	20	the min height of scroll bar in the direction of Y axis
barXMinWidth	Number	20	the min width of scroll bar in the direction of X axis
overflow	String	'auto'	'auto', 'hidden', 'hidden-x', 'hidden-y'
watchValue	Any	null	when content expands, bar would be refreshed
mobile	Boolean	false	scrollbar will be forced to show in mobile mode when it is set to true