Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

vue3-smooth-scroll

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue3-smooth-scroll

Simple vue smooth scroll

  • 0.8.1
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
3.2K
decreased by-21.07%
Maintainers
1
Weekly downloads
 
Created
Source

Vue3 Smooth Scroll

Vue 3.x npm license

Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

For simple use-cases, the native scroll-behavior CSS property (working draft) may be enough.

Features

  • Works on Vue 3
  • Directive and programmatic API with global and local config overrides
  • SSR
  • Smooth, non-blocking animation using requestAnimationFrame (with fallback)
  • Y-axis or vertical scrolling
  • Specific scroll containers
  • 1.4kB gzipped, 3.1kB min

Installation

npm:

npm install --save vue3-smooth-scroll
import { createApp } from 'vue'
import VueSmoothScroll from 'vue3-smooth-scroll'

const app = createApp(...)
app.use(VueSmoothScroll)

CDN:

<body>
  <script src="https://unpkg.com/vue@next"></script>
  <script src="https://unpkg.com/vue3-smooth-scroll"></script>
  <script>
    const app = Vue.createApp(...)
    app.use(VueSmoothScroll)
  </script>
</body>

Usage

Directive:

<a href="#sec-3" v-smooth-scroll>Section 3</a>

<section id="sec-3"></section>

Programmatic:

methods: {
  scrollToMyEl () {
    const myEl = this.$refs.myEl || this.$el || document.getElementById(...)

    this.$smoothScroll({
      scrollTo: myEl, // scrollTo is also allowed to be number
      hash: '#sampleHash' // required if updateHistory is true
    })
  }
}

Programmatic (in Vue3 setup):

import { inject, ref } from 'vue'
setup () {
  const myEl = ref(null)
  const smoothScroll = inject('smoothScroll')
  const scrollToMyEl = () => {
    smoothScroll({
      scrollTo: myEl.value,
      hash: '#sampleHash'
    })
  }
}

Custom options

Defaults:

{
  duration: 500,       // animation duration in ms
  offset: 0,           // offset in px from scroll element, can be positive or negative
  container: '',       // selector string or Element for scroll container, default is window
  updateHistory: true, // whether to push hash to history
  easingFunction: null // gives the ability to provide a custom easing function `t => ...`
                       // (see https://gist.github.com/gre/1650294 for examples)
                       // if nothing is given, it will defaults to `easeInOutCubic`
}

Global:

const app = createApp(...)
app.use(VueSmoothScroll, {
  duration: 400,
  updateHistory: false
})

Directive:

<div id="container">
  <a href="#div-id" v-smooth-scroll="{ duration: 1000, offset: -50, container: '#container' }">Anchor</a>

  <div id="div-id"></div>
</div>

Programmatic:

this.$smoothScroll({
  scrollTo: this.$refs.myEl,
  duration: 1000,
  offset: -50,
})

Programmatic (in Vue3 setup):

const smoothScroll = Vue.inject('smoothScroll')
smoothScroll({
  scrollTo: refs.myEl,
  duration: 1000,
  offset: -50,
})

License

MIT

Keywords

FAQs

Package last updated on 08 Jun 2021

Did you know?

Socket

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.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc