36 | 
13 | # vue-custom-scrollbar
Minimalistic but perfect custom scrollbar component for Vue.JS(using utatti/perfect-scrollbar, so if you have any question, you also can check the perfect-scrollbar repo)
# Why custom scrollbar
As you know, Chrome support custom scrollbar, but Firefox or other browsers don't support it, if you want your website perfect, please use this component~
# Why use vue-custom-scrollbar?
vue-custom-scrollbar is minimalistic but perfect scrollbar component for Vue.JS.
- No change on design layout
- Don't need manipulate DOM manually
- Use plain
scrollTopandscrollLeft - Scrollbar style is fully customizable
- Efficient update on layout change
# Demo
# Install
The best way to install and use vue-custom-scrollbar is with npm or yarn. It's registered
27 | as vue-custom-scrollbarr.
# npm
$ npm install vue-custom-scrollbar
28 | # Or
# yarn
$ yarn add vue-custom-scrollbar
29 | # Caveats
vue-custom-scrollbar emulates some scrolls, but not all of the kinds. It also does not work
30 | in some situations. You can find these cases in Caveats.
31 | Basically, items listed in the caveats are hacky to implement and may not be
32 | implemented in the future. If the features are really needed, please consider
33 | using browser-native scroll.
# How to use
Example code:
<template>
34 | <div>
35 | <vue-custom-scrollbar class="scroll-area" :settings="settings" @ps-scroll-y="scrollHanle">
36 | <img src="https://raw.githubusercontent.com/Binaryify/vue-custom-scrollbar/master/docs/azusa.jpg" height="720" width="1280" alt="">
37 | </vue-custom-scrollbar>
38 | </div>
39 | </template>
40 | <script>
41 | import vueCustomScrollbar from 'vue-custom-scrollbar'
42 | import "vue-custom-scrollbar/dist/vueScrollbar.css"
43 | export default {
44 | components: {
45 | vueCustomScrollbar
46 | },
47 | data() {
48 | return {
49 | settings: {
50 | suppressScrollY: false,
51 | suppressScrollX: false,
52 | wheelPropagation: false
53 | }
54 | }
55 | },
56 | methods: {
57 | scrollHanle(evt) {
58 | console.log(evt)
59 | }
60 | }
61 | }
62 | </script>
63 | <style >
64 | .scroll-area {
65 | position: relative;
66 | margin: auto;
67 | width: 600px;
68 | height: 400px;
69 | }
70 | </style>
71 | # Options
# swicher {Boolean}
Enable or disable this component
Default: true
# tagname {String}
Component default root element is section, setting other value can change it, for example : div
Default: section
# handlers {String[]}
It is a list of handlers to scroll the element.
Default: ['click-rail', 'drag-thumb', 'keyboard', 'wheel', 'touch']
# wheelSpeed {Number}
The scroll speed applied to mousewheel event.
Default: 1
# wheelPropagation {Boolean}
If this option is true, when the scroll reaches the end of the side, mousewheel 72 | event will be propagated to parent element.
Default: true
# swipeEasing {Boolean}
If this option is true, swipe scrolling will be eased.
Default: true
# minScrollbarLength {Number?}
When set to an integer value, the thumb part of the scrollbar will not shrink 73 | below that number of pixels.
Default: null
# maxScrollbarLength {Number?}
When set to an integer value, the thumb part of the scrollbar will not expand 74 | over that number of pixels.
Default: null
# scrollingThreshold {Number}
This sets threashold for ps--scrolling-x and ps--scrolling-y classes to
75 | remain. In the default CSS, they make scrollbars shown regardless of hover
76 | state. The unit is millisecond.
Default: 1000
# useBothWheelAxes {Boolean}
When set to true, and only one (vertical or horizontal) scrollbar is visible 77 | then both vertical and horizontal scrolling will affect the scrollbar.
Default: false
# suppressScrollX {Boolean}
When set to true, the scroll bar in X axis will not be available, regardless of 78 | the content width.
Default: false
# suppressScrollY {Boolean}
When set to true, the scroll bar in Y axis will not be available, regardless of 79 | the content height.
Default: false
# scrollXMarginOffset {Number}
The number of pixels the content width can surpass the container width without 80 | enabling the X axis scroll bar.
Default: 0
# scrollYMarginOffset {Number}
The number of pixels the content height can surpass the container height without 81 | enabling the Y axis scroll bar.
Default: 0
# Events
vue-custom-scrollbar dispatches custom events.
# ps-scroll-y
This event fires when the y-axis is scrolled in either direction.
# ps-scroll-x
This event fires when the x-axis is scrolled in either direction.
# ps-scroll-up
This event fires when scrolling upwards.
# ps-scroll-down
This event fires when scrolling downwards.
# ps-scroll-left
This event fires when scrolling to the left.
# ps-scroll-right
This event fires when scrolling to the right.
# ps-y-reach-start
This event fires when scrolling reaches the start of the y-axis.
# ps-y-reach-end
This event fires when scrolling reaches the end of the y-axis (useful for 82 | infinite scroll).
# ps-x-reach-start
This event fires when scrolling reaches the start of the x-axis.
# ps-x-reach-end
This event fires when scrolling reaches the end of the x-axis.
# Custom style
Please refer to perfect-scrollbar, then override the corresponding class style in your project
# Helpdesk
If you have any idea to improve this project or any problem using this, please 83 | feel free to upload an issue.
For common problems, there is a FAQ wiki 84 | page. Please check the page before uploading an issue.
Uploading a PR would be the fastest way to fix an issue.
# IE Support
The plugin support modern browsers including Edge and IE11, 85 | but may have some issues in IE11 mainly because of IE rendering bug concerning 86 | sync update on scroll properties. The problem is mentioned in 87 | Caveats too.
IE<11 is not supported, and patches to fix problems in IE<=10 will not be 88 | accepted. When old IEs should be supported, please fork the project and make 89 | modification locally.
# More
Please refer to perfect-scrollbar