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

Overview

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/[email protected]">script>
  <script src="https://unpkg.com/vue3-smooth-scroll">script>
  <script>
    const app = Vue.createApp(...)
    app.use(VueSmoothScroll)
  script>
body>

Usage

Directive:

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

<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' }">Anchora>

  <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

You might also like...
Component that customizes the scroll and inserts shadow when scrolling exists
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

A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Vue plugin to disable scrolling page

Vue plugin to disable scrolling page

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

This plugin allows you to change css values by scrolling

scroll-parallax-effect スクロールによってcssの値を変更することができるプラグインです。 This plugin allows you to change css values by scrolling. このプラグインには3つの機能があります。 Timing : 指定 位置

📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.
📜 Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x.

vue-stroll Vue.js + Stroll.js. Awesome CSS list scroll effects for Vue2.x. See Demo Installation npm i vue-stroll -S CDN Use this URL for development

Comments
  • Console says app.use is not a function

    Console says app.use is not a function

    Using Vue3 with VueCLI. Followed all the steps of installation, and ran into an issue when I get to this:

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

    Other than imports, these are the only two lines in main.js, and the console reports this:

    Uncaught TypeError: app.use is not a function at eval (main.js?56d7:7) at Module../src/main.js (app.js:1253) at webpack_require (app.js:849) at fn (app.js:151) at Object.1 (app.js:1266) at webpack_require (app.js:849) at checkDeferredModules (app.js:46) at app.js:925 at app.js:928

    main.js?56d7:7 refers to app.use(VueSmoothScroll)

    The following the only two lines I have in main.js: const app = createApp(App).mount('#app'); app.use(VueSmoothScroll)

    Please advise.

    opened by sudip-p 5
Releases(v0.8.1)
Owner
laineus
I'm making HTML5 games in pastime. At work, I am a lead engineer for a Dating app.
laineus
Lightweight Vue plugin for smooth-scrolling.

Vue Smooth Scroll Lightweight Vue plugin for smooth-scrolling. For simple use-cases, the native scroll-behavior CSS property (working draft) may be en

xlaoyu 12 Jun 7, 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
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
🍹 Next-gen compact native smooth scrolling components for Vue 3

?? Next-gen compact native smooth scrolling component library for Vue 3 ⚡ No scrollbar reinventing using DOM elements, no weird logic, only native scr

ZEOKKU 11 Oct 1, 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
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
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 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
Vue Scroll Detect - Detect component visibility change on scrolling

Vue Scroll Detect Detect component visibility change on scrolling. Installation yarn add vue-scroll-detect Example See examples/ at Code Sandbox Usage

Dzul Nizam 1 Jun 5, 2022