Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
vue-scroll-behavior
Advanced tools
Customize the scrolling position on route navigation
IE / Edge | Firefox | Chrome | Safari | Opera | iOS | Android |
---|---|---|---|---|---|---|
IE9+, Edge | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
You can check vue-scroll-behavior demos at:
Douban: https://jeneser.github.io/douban
Simple: https://jeneser.github.io/vue-scroll-behavior
npm install vue-scroll-behavior --save
import vueScrollBehavior from 'vue-scroll-behavior'
Vue.use(vueScrollBehavior, { router: router })
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/vue-scroll-behavior@0.2.0/dist/vue-scroll-behavior.js"></script>
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).
Vue.vueScrollBehavior(router)
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
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 |
This project uses semantic versioning. Learn more
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
MIT Copyright (c) 2017 Jeneser
FAQs
Scroll behavior for Vue.js
The npm package vue-scroll-behavior receives a total of 130 weekly downloads. As such, vue-scroll-behavior popularity was classified as not popular.
We found that vue-scroll-behavior demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.