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

laineus

Last update: Aug 16, 2022

Related tags

Scroll vue3-smooth-scroll

Overview

Vue3 Smooth Scroll

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:

Anchor

<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

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.

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

2 Feb 13, 2022

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

223 Sep 9, 2022

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

10 Jan 5, 2022

Vue plugin to disable scrolling page

0 May 12, 2021

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

0 Nov 27, 2020

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

2 Nov 5, 2020

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 : 指定位置

0 Mar 19, 2022

📜 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

155 Jul 16, 2022

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

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

Related tags

Overview

Vue3 Smooth Scroll

Features

Installation

npm:

CDN:

Usage

Directive:

Programmatic:

Programmatic (in Vue3 setup):

Custom options

Defaults:

Global:

Directive:

Programmatic:

Programmatic (in Vue3 setup):

License

You might also like...

Component that customizes the scroll and inserts shadow when scrolling exists

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

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

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

This plugin allows you to change css values by scrolling

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

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

Comments

Console says app.use is not a function

Releases(v0.8.1)

v0.8.1(Jun 8, 2021)

Owner

laineus

Lightweight Vue plugin for smooth-scrolling.

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

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.

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

🍹 Next-gen compact native smooth scrolling components for Vue 3

Starter template for parallax effects & smooth scrolling experience

A Vue.js directive for body scroll locking without breaking scrolling of a target element.

A Vue.js directive for body scroll locking without breaking scrolling of a target element.

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

Vue Scroll Detect - Detect component visibility change on scrolling