Demo Page

Customize Scrollbar

Vuescroll supports setting keep show or not and background.

source code

Detect size changes

Vuescroll supports detecting the size changes of content and native doesn't. It is inpired by element-resize-detector.


You can open browser's dev-tool to adjust content's size and see the effect.

source code

Pull-refresh or push-load

Vuescroll supports pull-refresh and push-load. It's uesful when you want to display a list of datas.

source code

Paging Mode

source code


To disable X or Y paging, just set scrollingY or X to false.

ops: {
  scrollPanel: {
    scrollingY: false; // or scrollingX: false

You had better to set your size of your each page to be equal to the size of the its parent dom, so that you won't see the content of another page in current view, that is to say , pnly show one page each time.

Snapping Mode

Vuescroll supports snapping while native doesn't. Snapping is similar to Paging, but there are alao a few difference: Paging slides a full page each time, but snapping slides a user-defined distance each time.

source code

Toggle between modes

You can even changes modes in runtime, and the postions won't be changed.

source code


Perhaps not works well in mobile, becase slide and native are the same in mobile.

source code

Time Picker

You can make a time-picker by setting snapping to true and bouncing to false, scrollingX to false.

source code

SSR(Server-Side Rendering) Demo

There are two different environments for vuescroll ssr demo. If you have any problems with ssr, you can refer to the following:

Node Env

Demo in Node environment


Demo in Php environment

Nuxt Ebv

Demo in Nuxt environment

Last Updated: 11/27/2018, 11:42:51 AM