Customize the scrolling position on route navigation. Especially hash mode.

Overview

vue-scroll-behavior

Customize the scrolling position on route navigation

npm version Build Status David Percentage of issues still open PR license

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

Table of content

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 customize the scrolling position on route navigation. Especially hash mode. You just need to tell it which routes need to be processed, and it will do that automatically

By default, It will scroll to the saved position. If you ignore some routes, they will directly scroll to the top

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)
  • Compatibility - Working in HTML5 history mode and hash mode
  • Automatically - Automatically saves or restores the scroll position
  • Customizable - Can manually save or restore the scroll position

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,    // The router instance
  el: '#app',        // Custom element
  maxLength: 100,    // Saved history List max length
  ignore: [/\/boo/, /\/zoo/],    // ignore some routes, they will directly scroll to the top
  delay: 0          // Delay by a number of milliseconds
})

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({})
el String null CSS selector: #app
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

This project uses semantic versioning. Learn more

  • October 27, 2017:
    • Publish @0.2.0 Merged PR#9, Add delay
  • 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

Comments
  • Regexp does not work

    Regexp does not work

    I have route /website, in script write -
    Vue.use(vueScrollBehavior, { router: router, maxLength: 100, ignore: [//website/, //zoo/], })

    but it ignore my ignore, what Im doing wrong?

    needs info 
    opened by lokkomokko 5
  • Feature: Add simple customisable delay

    Feature: Add simple customisable delay

    I use transitions with the router, and currently the scroll happens immediately, while the views are in transition.

    Add a simple delay option, specified in milliseconds and defaulting to 0, allowing consumers to delay the scroll. This will allow those who use, for example, a standard out-in fade transition for all of their route changes to use this library.

    I can contribute the changes for this feature if accepted.

    feature 
    opened by decates 2
  • Errors under vue 3.0?

    Errors under vue 3.0?

    I'm sometimes getting the error in my console:

    
    vue-scroll-behavior.js:formatted:171 Uncaught (in promise) TypeError: e.nextTick is not a function
        at n (vue-scroll-behavior.js:formatted:171:NaN)
        at n (vue-scroll-behavior.js:formatted:171:NaN)
        at vue-scroll-behavior.js:formatted:171:NaN
        at triggerAfterEach (vue-scroll-behavior.js:formatted:171:NaN)
        at vue-scroll-behavior.js:formatted:171:NaN
    
    opened by inspire22 0
  • Bug with routes

    Bug with routes

    The plugin does not distinguish /menu/feed from /menu/messenger and so on. The position from the first route is carried over to all the others

    { path: '/menu/', component: () => import('layouts/MenuLayout'), children: [ {path: 'feed', component: () => import('pages/Tabs/Posts')}, {path: 'groups', component: () => import('pages/Tabs/Groups')}, {path: 'notifications', component: () => import('pages/Tabs/Notifications')}, {path: 'people', component: () => import('pages/Tabs/People')}, {path: 'messenger', component: () => import('pages/Tabs/Messenger')}, ] },

    opened by MaYoRr 0
  • Suggestion: Allow option to filter on routes

    Suggestion: Allow option to filter on routes

    There is already an option to ignore routes, but in the many cases where you only have one or a few pages that need the persist their scroll, it's often easier to only select these instead of ignoring all the rest.

    I suggest a filter kind of option:

    Vue.use(vueScrollBehavior, {
      filter: [/\/boo/, /\/zoo/],    // only apply on these routes,
    })
    feature 
    opened by sebmor 2
  • vue-scroll-behavior compatibility?

    vue-scroll-behavior compatibility?

    我在使用vue-scroll-behavior根据题主里面的方法安装:

    import vueScrollBehavior from 'vue-scroll-behavior' Vue.use(vueScrollBehavior, { router: router });

    发现我返回时,他依然还是在顶部下来一点点,不会返回到离开的地方;是不是在组件里面还需要定义什么?

    我这里的路由里面name设置的是中文,是不是和这个(name)有关系?我这里的name是用来设置title的;

    { path: '/search', name: "搜索", component: Search },

    我这弄了个图片:麻烦题主有时间的时候帮忙看下 -1

    help wanted 
    opened by FishStudy520 4
  • Please Feat and Fix some issue

    Please Feat and Fix some issue

    1. Feat: can customize the bind location, including, but not limited to, the overall location of the body and custom commands that are used to mark the location.
    2. Fix: pages are not high enough to cause accurate records or always scroll to the top position.
    3. Feat: rolling timing control. There is a delay in data access on the page, and the page height due to incomplete content is insufficient. Will consider adding latency or asynchronous...

    Good luck ~

    enhancement help wanted wontfix 
    opened by jeneser 2
Owner
Yazhe Wang
Web Developer / JavaScript / Vue.js
Yazhe Wang
A vue 2.0 directive to keep scroll position for keep-alived components.

vue-keep-scroll-position A vue 2.0 directive to keep scroll position for keep-alived components. Forked from vue-keep-scroll and rewritten for vue 2.0

Beep LIN 38 Feb 18, 2022
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold or past the threshold

A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold, or past the threshold

javad mnjd 0 Jun 30, 2022
Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

Giorgos Sideris 3 Aug 1, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 57 Mar 2, 2022
:beginner:A simple, seamless scrolling for Vue.js vue无缝滚动component

vue-seamless-scroll A simple, Seamless scrolling for Vue.js Features Initial configuration support Compatible with multiple platforms Multi-technology

sos 1.5k Sep 23, 2022
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Haojen 34 Sep 20, 2022
Starter template for parallax effects & smooth scrolling experience

Nuxt + Locomotive Scroll Starter template for parallax effects & smooth scrolling experience. Empower your Nuxt project in no time. See it in action →

Ivo Dolenc 36 Sep 27, 2022
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
Component that customizes the scroll and inserts shadow when scrolling exists

Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

André Lins 2 Feb 13, 2022
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 7.2k Oct 1, 2022
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 531 Sep 27, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022
A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

null 0 May 10, 2022
↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.

Vue Scroll Animator ↕ A simple but fast & powerful library to animate HTML elements while scrolling pages. Installation npm install @byloth/vue-scroll

Matteo Bilotta 0 May 19, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

xlaoyu 119 Aug 22, 2022