A vuejs scrollbar component for PC

Related tags

vue-scrollbar-live
Overview

vue-scrollbar-live

NPM Version Download Month gzip with dependencies: 4.9kb typescript pkg.module

pkg.module supported, which means that you can apply tree-shaking in you project

中文文档

A vue scrollbar component, support SSR.

repository

https://github.com/livelybone/vue-scrollbar-live.git

Demo

https://github.com/livelybone/vue-scrollbar-live#readme

Run Example

you can see the usage by run the example of the module, here is the step:

  1. Clone the library git clone https://github.com/livelybone/vue-scrollbar-live.git
  2. Go to the directory cd your-module-directory
  3. Install npm dependencies npm i(use taobao registry: npm i --registry=http://registry.npm.taobao.org)
  4. Open service npm run dev
  5. See the example(usually is http://127.0.0.1:3000/examples/test.html) in your browser

Installation

npm i -S vue-scrollbar-live

Global name - The variable the module exported in umd bundle

VueScrollbar

Interface

See what method or params you can use in index.d.ts

Usage

import VueScrollbar from 'vue-scrollbar-live';

// Global register
Vue.component('scrollbar', VueScrollbar);

// Local register
new Vue({
  components:{VueScrollbar}
})

when you want to set this module as external while you are developing another module, you should import it like this:

import * as VueScrollbar  from 'vue-scrollbar-live'

// then use it by need

CDN

Use in html, see what you can use in CDN: unpkg

<-- use what you want -->
<script src="https://unpkg.com/vue-scrollbar-live/lib/umd/<--module-->.js"></script>

Or,see what you can use in CDN: jsdelivr

<script src="https://cdn.jsdelivr.net/npm/vue-scrollbar-live/lib/umd/<--module-->.js"></script>

style

Since 5.0.0, you don't need to import the css file in your project

For rewrite style, you can copy the index.scss or index.css file, rewrite it use !important(this is necessary), and the import the file in your project

Props

Name Type DefaultValue Description
isMobile Boolean false Mark the device that component be used
maxHeight [String, Number] none Used to set style max-height of the wrap .scrollbar-wrap.$/
scrollTo [Number, Object] 0 Used to set scroll y of the content wrap .scrollbar-content. value: 0 ~ 1$/
marginToWrap Number 0 Used to set scroll y of the content wrap .scrollbar-content. value: 0 ~ 1$/

Events

Name EmittedData Description
wrapClick event click event of the wrap
reachBottom none Triggered when the scrollbar reach the bottom
reachTop none Triggered when the scrollbar reach the top
reachLeft none Triggered when the scrollbar reach the left
reachRight none Triggered when the scrollbar reach the right
startDrag Object Drag start event of the scrollbar
endDrag Object Drag end event of the scrollbar
scroll Event Native scroll event
domChange none Triggered when the dom that refer to this comp changed

QA

  1. Error Error: spawn node-sass ENOENT

You may need install node-sass globally, npm i -g node-sass

  1. The domChange event not triggered when the sub dom changed.

Check that the current browser support MutationObserver API. If not, you can use MutationObserver polyfill to solve this problem

Issues
  • On initialization horizontal scroll not working

    On initialization horizontal scroll not working

    Found that often during initialization, scrollbar scrollbar-x does not have the css property left. And using the mouse is not possible to move the scrollbar. After using shift + wheel on the scrollbar, this property appears and everything works fine.

    That is how looks scrollbar-x tag on initialization. Console hasn't any errors.
    opened by odeal4ik 7
  • Overflow X

    Overflow X

    Can it be used as horizontal slider?

    Thanks

    opened by bajki 2
  • Scroll to bottom

    Scroll to bottom

    Is it possible to push scroll to bottom from method

    opened by bajki 1
  • Scroll event

    Scroll event

    Please provide an event that triggers on the scroller position change. It can be also debounced.

    opened by imperatormk 1
  • Importing the component throws an error

    Importing the component throws an error

    I have tried to import the component both globally and locally and i keep getting this error

    TypeError: Cannot read property 'replace' of undefined
        at VueComponent.$_contentStyle (index.js?42c6:381)
        at Watcher.get (vue.runtime.esm.js?2b0e:4479)
        at Watcher.evaluate (vue.runtime.esm.js?2b0e:4584)
        at Proxy.computedGetter (vue.runtime.esm.js?2b0e:4836)
        at Proxy.__vue_render__ (index.js?42c6:548)
        at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3548)
        at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)
        at Watcher.get (vue.runtime.esm.js?2b0e:4479)
        at new Watcher (vue.runtime.esm.js?2b0e:4468)
        at mountComponent (vue.runtime.esm.js?2b0e:4073)
    

    Here is the code

    import scrollbar from 'vue-scrollbar-live';
    
    components:{
       ...notifications.components,
       scrollbar
    }
    
    opened by Jeffrey-Kimani 1
  • 无法使用scrollTo参数滚动到页面顶部

    无法使用scrollTo参数滚动到页面顶部

    尝试了number类型的 0 object类型的 {x:0,y:0} {x:"0",y:"0"} 都不行

    opened by jimizai 4
Owner
志平 刘
do more, write less!
志平 刘
null 1 Oct 8, 2021
A vuejs scrollbar component for PC

vue-scrollbar-live pkg.module supported, which means that you can apply tree-shaking in you project 中文文档 A vue scrollbar component, support SSR. repos

志平 刘 11 Oct 12, 2021
a nice scrollbar for vue.js 2.0

vue-nice-scrollbar a nice scrollbar for vue.js 2.0 Demo DEMO Install npm install vue-nice-scrollbar --save Usage import Vue from 'vue' import vue

Burning 14 Jan 22, 2021
The Simplest Scroll Area Component with custom scrollbar for Vue Js. https://bosnaufal.github.io/vue-scrollbar/

Vue Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue Js. All animation, Height and Width are pure CSS, So it's TOTALLY CUSTO

Naufal Rabbani 116 Mar 23, 2021
Smooth scrollbar for Vue.js projects

Vue Smooth Scrollbar Smooth Scrollbar for Vue.js projects. Based on @idiotwu's smooth-scrollbar. Usage 1. Install dependency npm install --save vue-sm

Magisters 31 Aug 12, 2021
A vue component of scrollbar

vue-scrollbar-simple Introduction vue-scrollbar-simple is a vue component of scrollbar Install $ npm install vue-scrollbar-simple --save Usage impo

Zhi Xiong 3 Oct 1, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 25 Aug 16, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 12, 2021
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.1k Oct 19, 2021
The virtual responsive crossbrowser scrollbar component for VueJS 2x

VBar The virtual responsive crossbrowser scrollbar component for VueJS 2x DEMO Usage Install Using NPM npm i v-bar Using yarn yarn add v-bar In your .

Luigui Delyer 222 Oct 2, 2021
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 659 Sep 13, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021
A vue2 component based on Iscroll

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 45 Mar 4, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 180 Sep 8, 2021
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 180 Sep 8, 2021
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021