Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add delay #9

Merged
merged 4 commits into from
Oct 27, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ When using client-side routing, we may want to scroll to top when navigating to

**Of course, If you have some special scenes, we also provide some options, and you can manually use them to save or restore the scroll position**

**If you use transitions on all of your route changes, use the _delay_ option to delay the scroll until the appropriate point (e.g. the middle of the changeover).**
## Features

* **Simplicity** - only need to call `Vue.vueScrollBehavior(router)`
Expand All @@ -87,7 +88,8 @@ import vueScrollBehavior from 'vue-scroll-behavior'
Vue.use(vueScrollBehavior, {
router: router, // The router instance
maxLength: 100, // Saved history List max length
ignore: [/\/boo/, /\/zoo/] // ignore some routes, they will directly scroll to the top
ignore: [/\/boo/, /\/zoo/], // ignore some routes, they will directly scroll to the top
delay: 0 // Delay by a number of milliseconds
})
```

Expand All @@ -112,6 +114,7 @@ Prop | Data Type | Default | Description
`router` | Object | | The router instance: `const router = new VueRouter({})`
`ignore` | Array | `[ ]` | **RegExp** list to ignore some routes, they will directly scroll to the top
`maxLength` | Number | `50` | Saved history List max length
`delay` | Number | `0` | Delay scroll by a number of milliseconds


## ChangeLog
Expand Down
2 changes: 1 addition & 1 deletion dist/vue-scroll-behavior.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

18 changes: 15 additions & 3 deletions src/utils/helpers.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,10 @@ export function setOption (options) {
if (typeof options.ignore !== 'undefined' && Array.isArray(options.ignore)) {
vueScrollBehavior._ignore = options.ignore
}

if (typeof options.delay === 'number') {
vueScrollBehavior._delay = options.delay
}
}

/**
Expand All @@ -28,9 +32,17 @@ export function getScrollPosition () {
* Setting Scroll Position
*/
export function setScrollPosition (Vue, position = {x: 0, y: 0}) {
Vue.nextTick(() => {
window.scrollTo(position.x, position.y)
})
if (vueScrollBehavior._delay > 0) {
setTimeout(() => {
Vue.nextTick(() => {
window.scrollTo(position.x, position.y)
})
}, vueScrollBehavior._delay);
} else {
Vue.nextTick(() => {
window.scrollTo(position.x, position.y)
})
}
}

/**
Expand Down
3 changes: 2 additions & 1 deletion src/vue-scroll-behavior.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { setOption, isIgnoreRoute, getScrollPosition, setScrollPosition,

const vueScrollBehavior = {
_maxLength: 50,
_ignore: []
_ignore: [],
_delay: 0
}

/**
Expand Down