A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Overview

Vuescroll

VersionBuild Status Coverage License Download prettier

Demo

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 value(It means you don't even have to write any configuration). Just wrap the content by <vue-scroll> and a custom scrollbar will show. It supports:

  • Customizable scrollbar
  • Pull-to-refresh, push-to-load
  • Carousel

Vuescroll's compatibility is the same as Vue.js 2.X.

Demo

  • You can find demo under examples folder of repo.
  • You can see the full features of vuescroll at Live Demo section of the website.

Install

npm i vuescroll -S

# OR

yarn add vuescroll

Usage

Import and registry

import vuescroll from 'vuescroll';
import Vue from 'vue';

Vue.use(vuescroll);

// OR

Vue.component('vue-scroll', vuescroll);

Wrap the content by vue-scroll

<div class="container">
  <vue-scroll>
    <div class="content"></div>
  </vue-scroll>
</div>

Documentation

For detailed docs, please see Guide section on the website.

Communication

  • Wechat

Demo

  • Twitter

@wangyi70991

License

MIT By Yves Wang(Wangyi Yi)

Comments
  • 外层嵌套vuescroll后内部的原始scroll无法用鼠标中键滚动

    外层嵌套vuescroll后内部的原始scroll无法用鼠标中键滚动

    win10, vue + antd + vuescroll(最新).

    ==================

    事情是这样的,

    我在antd Modal 里有一个vuescroll滚动条,滚动条内 有一个富文本,但是富文本用的是原始scroll.

    在富文本里写完长文本后 无法用鼠标中键滚动 ,鼠标中键滚动反而会触发 外层 Modal的滚动条。 只能拖动。

    可能是我使用的方法问题,但是在网上实在没有找到靠谱的解决办法,所以只能在这请教下是什么原因导致的?

    opened by GlodenBoy 12
  • Last update introduces a bug on vuescroll-panel

    Last update introduces a bug on vuescroll-panel

    On the last update, vuescroll-panel seems to not be set correctly, and the margin-right: -17px, used to hide the browser scollbar and the overflow-y: scroll, don't appear until you hover the panel, you can force the browser scrollbar to appear by refreshing the browser, be sure your mouse cursor is not hovering the panel.

    That bug forced me to specify two those properties on my styles in order to fix it.

    Chrome version: 61 (I'm using Electron) OS: Windows

    help wanted vue related 
    opened by doctorsirius 12
  • Edge browser support

    Edge browser support

    Hello

    Looks like there's an issue on Edge. The scroll appears, but the content is not hidden. It overflows. Works fine on Chrome/Firefox/IE11. :thinking:

    opened by Humeira 11
  • Memory Leak Problem

    Memory Leak Problem

    when i use vuescroll in Vue, there hava a memory leak problem, when I leave the page which use vuescroll,the listener action was not release, the component have no release api to destory ,how can i slove this problem? thanks

    opened by songyk674 9
  • handle-scroll 以后不执行handle-scroll-complete

    handle-scroll 以后不执行handle-scroll-complete

    handle-scroll 以后不执行handle-scroll-complete ?是我代码问题吗 @load-start="handleLoadStart" @handle-scroll-complete="handleComplete" handleComplete () { console.log(1) this.$emit('scroll-finish') }, handleScroll () { console.log(2) this.$emit('scrolling') }, @scroll-finish="canClick = true" @scrolling="canClick = false" 因为列表需要点击事件,所以滚动时候不能点击 但是滚动结束监听不生效 有时候

    opened by crisbb 8
  • Nested onclick events inside vuescroll component

    Nested onclick events inside vuescroll component

    I have horizontal dragscrollable layout that contains some elements with onclick events. However, when scrolling this layout, all events of nested elements trigger too.

    I have found a workaround for this, but it doesn't work correct in some cases. For example, when user scrolls extremely fast in some direction (left or right), it triggers bouncing of the layout, so after that the user have to wait some time until bouncing stops, and only after all this stuff elements are becoming available for clicking on them. (Here's a gif that demonstrates how it happens)

    If bouncing is disabled, everything work good, but is there a way to make it more accurately?

    Here's codesandbox to see clearly what's happening: https://codesandbox.io/s/codesandbox-nuxt-0psc4

    Package version: "vuescroll": "^4.14.4" Browser: Chrome 78.0.3904.70

    opened by phen0menon 8
  • Unable to scroll by max-height

    Unable to scroll by max-height

    Is there any way to set the max-height property for the parent instead of fixing a height?

    Here I have an example. Try to change the data mode: 'max-height' by default, it doesn't work at all.

    But it works if I set the height by default; and then switch to max-height and resize the window a little bit it's not working any more.

    https://jsfiddle.net/sontd/zgvrq89u/3/

    opened by trandaison 8
  • Blurry border

    Blurry border

    When i scrolling down sometimes top and bottom side border become blurry. And it changing upon all way of rail. Horizontal line has same effect. I'm using Win 10 chrome 72.0.3626.96. Link to repro Example

    help wanted 
    opened by GitNomster 8
  • <vue-scroll>还需要自己注册?

    还需要自己注册?

    Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. @wangyi7099 这个插件怎么注册呢? 你的API里没有提到, 望大佬指点

    opened by YuFy1314 8
  • 使用NUXT 服务端渲染时 报DOM错误

    使用NUXT 服务端渲染时 报DOM错误

    [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside

    , or missing . Bailing hydration and performing full client-side render.

    配置如下: { src: '~plugins/vuescroll', ssr: false }, ssr 是false

    这个问题是因为服务端与客户端渲染的DOM结构不一样。出现的这个问题是vuescroll没有允许在服务端使用导致的。

    但是如果改成true 就会报 window is not defined 因为服务端没有window

    opened by denkloge 8
  • Nuxt Configuration

    Nuxt Configuration

    Do you know if this can work with Nuxt?

    I created a vuescroll.js plugin

    import Vue from 'vue'
    import vuescroll from 'vuescroll'
    Vue.use(vuescroll)
    

    Added that to plugins: [{ src: '~/plugins/vuescroll.js', ssr: false }] in the nuxt.config

    But I get the error "window is not defined"

    Any ideas?

    Thanks

    opened by movepixels 8
  • ie11中,模态框中滚动组件不能正常显示

    ie11中,模态框中滚动组件不能正常显示

    ie11环境中出现问题,firefox和chrome中正常

    完整代码在https://gitee.com/corn2019/modal-scroll

    在main.js中封装模态框

    const openModal = (modal, options = {}) => {
      const ModalConstructor = Vue.extend({ ...modal })
      const ModalInstance = new ModalConstructor({ ...options })
      ModalInstance.$mount()
      document.body.appendChild(ModalInstance.$el)
    }
    Vue.prototype.$openModal = openModal
    

    模态框组件中封装close函数

    close() {
          this.$destroy()
          if (this.$el) document.body.removeChild(this.$el)
        },
    

    firefox中运行结果正常(上面部分为非模态框中,下面部分在模态框中) avatar https://gitee.com/corn2019/modal-scroll/blob/master/%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C%E5%9B%BE%E7%89%87/firefox%E6%AD%A3%E5%B8%B8.png


    ie中数据显示异常 avatar https://gitee.com/corn2019/modal-scroll/blob/master/%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C%E5%9B%BE%E7%89%87/ie%E4%B8%AD%E6%A8%A1%E6%80%81%E6%A1%86%E9%87%8C%E6%95%B0%E6%8D%AE%E6%9C%AA%E6%AD%A3%E5%B8%B8%E6%98%BE%E7%A4%BA.png


    ie中关闭模态框中报错 Error in beforeDestroy hook: "Error: 拒绝访问。 avatar https://gitee.com/corn2019/modal-scroll/blob/master/%E8%BF%90%E8%A1%8C%E7%BB%93%E6%9E%9C%E5%9B%BE%E7%89%87/ie%E5%85%B3%E9%97%AD%E6%A8%A1%E6%80%81%E6%A1%86%E6%97%B6%E6%8A%A5%E9%94%99.png

    bug report need repro 
    opened by jinglun2019 0
  • How to customize __rail or __bar_button ?

    How to customize __rail or __bar_button ?

    Hello everyone I want to make a scroll bar like this. How can I redefine __rail or __bar_button so that the buttons follow __bar-wrap and represent svg elements? 2020-10-06_12-26-30

    feature request 
    opened by Vincently92 1
  • Is it possible to use pullRefresh feature only?

    Is it possible to use pullRefresh feature only?

    I would like to use pullRefresh feature only, without custom scroll bars and any other scroll related features.

    Is this possible to achieve?

    This is my configuration. It is very close but I am unable to scroll down the page when preventDefaultOnMove is true. When it is false I can scroll down but browser pull to refresh is triggered together with vuescroll event

    ops: {
            mode: "slide",
            vuescroll: {
              mode: "slide",
              pullRefresh: {
                enable: true
              },
              scroller: {
                 preventDefaultOnMove: true
              }
            },
            bar: {
              disable: true
            }
          }
    feature request 
    opened by ElVisPL 1
  • Subpixel values of container width

    Subpixel values of container width

    When the wrapping container has witdth value in subpixels (eg. 500.25px), then applied gutter to minus right margin does not fully hide native scrollbar, while width values with decimal part above 0.5px work just fine.

    help wanted 
    opened by aldinezi 14
Releases(v4.8.12)
Owner
A place to write codes. https://github.com/wangyi7099
null
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 117 Feb 23, 2022
null 1 Oct 8, 2021
🦉 A simple friendly lightweight Vue.js scrollbar to make take your scrollbar game to the next level.

A simple friendly lightweight scrollbar to make take your scrollbar game to the next level. This awesome package was ported from the awesome simple-scrollbar

Jonathan Bakebwa 12 Jul 6, 2022
(🗃️ 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 655 Sep 22, 2022
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

Mihir Kumar 5 May 14, 2022
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 447 Sep 30, 2022
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 261 Sep 6, 2022
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 30 Sep 18, 2022
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 9 Sep 22, 2022
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
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 34 Sep 18, 2022
Vue.js wrapper for perfect scrollbar

vue2-perfect-scrollbar Vue.js minimalistic but powerful wrapper for perfect scrollbar Are you looking compatible version with Vue3 ? check https://git

Adam 261 Sep 6, 2022
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 Pretty Scroll Area Component with custom scrollbar for Vue 2.

Vue 2 Scrollbar The Simplest Scroll Area Component with custom scrollbar for Vue 2. It's based on react-scrollbar. All animation, Height and Width are

Naufal Rabbani 234 Sep 15, 2022
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 226 Sep 21, 2022
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

志平 刘 10 Apr 9, 2022
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

abelTO 154 Sep 26, 2022
Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

chenronghui 0 Mar 1, 2021
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices

vue-pinch-scroll-zoom Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices example: h

CoddiCat 24 Sep 9, 2022