vue-scroll-behavior

Completely customize the scroll behavior on route navigation

IE / Edge	Firefox	Chrome	Safari	Opera	iOS	Android
IE9+, Edge	✓	✓	✓	✓	✓	✓

Table of content

• Demo
• Installation
• Description
• Example
• Options
• ChangeLog
• Contribute

Demo

You can check vue-scroll-behavior demos at:

Douban: https://jeneser.github.io/douban

Simple: https://jeneser.github.io/vue-scroll-behavior

Installation

NPM

npm install vue-scroll-behavior --save

import vueScrollBehavior from 'vue-scroll-behavior'

Vue.use(vueScrollBehavior, { router: router })

Direct include

If you are using Vue globally, just include vue-scroll-behavior.js and it will automatically install it. Then, you need call Vue.$vueScrollBehavior(router) pass the router instance router.

<script src="path/to/vue-scroll-behavior.js"></script>

<script>
  Vue.$vueScrollBehavior(router)
</script>

CDN

<script src="https://unpkg.com/[email protected]/dist/vue-scroll-behavior.js"></script>

Description

When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. vue-router allows you to achieve these and even better. But, vue-router scroll behavior feature only works in HTML5 history mode...

vue-scroll-behavior allows you to completely customize the scroll behavior in HTML5 history mode and hash mode.

Features

• Simplicity - only need to call Vue.vueScrollBehavior(router)
• Compatibility - Working in HTML5 history mode and hash mode

Example

When used with a module system, you can install it via Vue.use(), then pass some opts:

import Vue from 'vue'
import router from './router'
import vueScrollBehavior from 'vue-scroll-behavior'

// Using vueScrollBehavior
Vue.use(vueScrollBehavior, {
  router: router,
  maxLength: 100,
  ignore: [/\/boo/, /\/zoo/],
})

For additional examples and detailed description check the demo. https://jeneser.github.io/douban

You can clone this repository. Check the silmp demo.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Options

List of available Options:

Prop	Data Type	Default	Description
router	Object		The router instance: const router = new VueRouter({})
ignore	Array	[ ]	RegExp list to ignore some routes
maxLength	Number	50	Saved history List max length

ChangeLog

• June 24, 2017:
  • Publish @0.1.6 Fix issue#2
• June 7, 2017:
  • Publish @0.1.5 Add some opts
• June 5, 2017:
  • Publish @0.1.3
  • Publish @0.1.4
• June 4, 2017:
  • Fix some bug, Perform browser testing
  • Publish @0.1.2

Contribute

Please make sure to read the Contributing Guide before making a pull request.

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build library and demo for production
npm run build

License

MIT Copyright (c) 2017 Jeneser