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.

TIP

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

TIP

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

WARNING

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

PHP Env

Demo in Php environment

Nuxt Ebv

Demo in Nuxt environment

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