1.2.4 • Published 4 years ago

vue-scroll-bar v1.2.4

Weekly downloads
86
License
MIT
Repository
github
Last release
4 years ago

vue-scroll-bar

npm Build Status NPM version Downloads

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

show-y

show-x

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

PropsTypeDefaultDescription
scrollTrackStyleObject{}the style of scroll track
scrollTrackYStyleObjectscrollTrackStylethe style of scroll track in the direction of Y axis
scrollTrackXStyleObjectscrollTrackStylethe style of scroll track in the direction of X axis
scrollBarStyleObject{}the style of scroll bar
scrollBarYStyleObjectscrollBarStylethe style of scroll bar in the direction of Y axis
scrollBarXStyleObjectscrollBarStylethe style of scroll bar in the direction of X axis
barYMinHeightNumber20the min height of scroll bar in the direction of Y axis
barXMinWidthNumber20the min width of scroll bar in the direction of X axis
overflowString'auto''auto', 'hidden', 'hidden-x', 'hidden-y'
watchValueAnynullwhen content expands, bar would be refreshed
mobileBooleanfalsescrollbar will be forced to show in mobile mode when it is set to true
1.2.4

4 years ago

1.2.3

4 years ago

1.2.2

6 years ago

1.2.1

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago

0.1.0

6 years ago

0.0.2

6 years ago

0.0.1

6 years ago