vue-ez-scroll

Customizable scrolling wrapper component for Vue

Install

# via npm
npm install vue-ez-scroll --save
# or just take away to your project
https://github.com/gomonk3037/vue-ez-scroll/blob/master/src/Scroll.vue

How To Use

<template>
  <div>

    <scroll class="scrolling" :option="scrollOption">
      <!-- Drop your contents  -->
    </scroll>

  </div>
</template>

<script>
import Scroll from 'vue-ez-scroll';

export default {
  data: () => ({
    scrollOption: {
      wheelSpeed: 100,
    },
  }),
  components: { 
    Scroll,
  },
};
</script>

# import default scrollbar style
<style src="vue-ez-scroll/style.css" />
# for visualize scroll - required
<style>
.scrolling {
  /*
    vertical scroll => need 'max-height'
    horizontal scroll => need 'max-width'
  */
  max-height: 30rem;
}
</style>

Props

option (Object)

const default = {
  // scroll direction
  horizontal: true,
  vertical: true,
  // higher value => faster scrolling
  wheelSpeed: 150,
  // rail margin
  railMargin: 0,
};

Customize scrollbar appearance!

Example written in scss
if you wanna css - https://github.com/gomonk3037/vue-ez-scroll/tree/master/dist/style.css

change background-color & border-radius

.vScroll {

  &__bar {
    background-color: pink;
    border-radius: 0;
  }
}

change content transition

.vScroll {

  &__content {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
}

Thank you!

If you have a feature you'd like to add, feel free to leave it in the issue.
I'll give you an answer within three days at the latest.