Adds a directive that listens for click events and scrolls to elements.

Last update: Aug 16, 2022

vue-scrollto

Vue 2.x Vue 3.x npm npm-downloads license

DEMO

Scrolling to elements was never this easy!

This is for vue 2.x and vue 3.x (since v2.19.0)

For vue 1.x use [email protected] (note the capital T) but keep in mind that the old version depends on jquery.

Under the hood

vue-scrollto uses window.requestAnimationFrame to perform the animations, thus giving the best performance.

Easing is done using bezier-easing - A well tested easing micro-library.

It even knows when the user interrupts, and doesn't force scrolling that would result in bad UX.

Installing

This package is available on npm.

If you used this package before, please ensure you are using the right one, since it has been renamed from `vue-scrollTo` to `vue-scrollto`

Using npm:

npm install --save vue-scrollto

Using yarn:

yarn add vue-scrollto

Directly include it in html:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

When including it in html, it will automatically call `Vue.use` and also set a `VueScrollTo` variable that you can use!

Nuxt.js

Add vue-scrollto/nuxt to modules section of nuxt.config.js

{
    modules: [
        'vue-scrollto/nuxt',

        // Or if you have custom options...
        ['vue-scrollto/nuxt', { duration: 300 }],
    ]
}

Usage

vue-scrollto can be used either as a vue directive, or programatically from your javascript.

As a vue directive

var Vue = require('vue');
var VueScrollTo = require('vue-scrollto');

Vue.use(VueScrollTo)

// You can also pass in the default options
Vue.use(VueScrollTo, {
     container: "body",
     duration: 500,
     easing: "ease",
     offset: 0,
     force: true,
     cancelable: true,
     onStart: false,
     onDone: false,
     onCancel: false,
     x: false,
     y: true
 })

In case you are using the browser version (directly including the script on your page), you can set the defaults with

VueScrollTo.setDefaults({
    container: "body",
    duration: 500,
    lazy: false,
    easing: "ease",
    offset: 0,
    force: true,
    cancelable: true,
    onStart: false,
    onDone: false,
    onCancel: false,
    x: false,
    y: true
})
<a href="#" v-scroll-to="'#element'">Scroll to #element</a>

<div id="element">
    Hi. I'm #element.
</div>

If you need to customize the scrolling options, you can pass in an object literal to the directive:

<a href="#" v-scroll-to="{
     el: '#element',
     container: '#container',
     duration: 500,
     lazy: false
     easing: 'linear',
     offset: -200,
     force: true,
     cancelable: true,
     onStart: onStart,
     onDone: onDone,
     onCancel: onCancel,
     x: false,
     y: true
 }">
    Scroll to #element
</a>

Check out the Options section for more details about the available options.

Programmatically

var VueScrollTo = require('vue-scrollto');

var options = {
    container: '#container',
    easing: 'ease-in',
    lazy: false,
    offset: -60,
    force: true,
    cancelable: true,
    onStart: function(element) {
      // scrolling started
    },
    onDone: function(element) {
      // scrolling is done
    },
    onCancel: function() {
      // scrolling has been interrupted
    },
    x: false,
    y: true
}

var cancelScroll = VueScrollTo.scrollTo(element, duration, options)

// or alternatively inside your components you can use
cancelScroll = this.$scrollTo(element, duration, options)

// to cancel scrolling you can call the returned function
cancelScroll()

Options

el / element

The element you want to scroll to.

container

The container that has to be scrolled.

Default: body

duration

The duration (in milliseconds) of the scrolling animation.

Default: 500

easing

The easing to be used when animating. Read more in the Easing section.

Default: ease

lazy

By default targetX/targetY are calculated once at the start of a scroll, however if the target may shift around during the scroll - setting lazy to false will force recalculation of targetX/targetY at each scroll step.

Default: true

offset

The offset that should be applied when scrolling. This option accepts a callback function since v2.8.0.

Default: 0

force

Indicates if scrolling should be performed, even if the scroll target is already in view.

Default: true

cancelable

Indicates if user can cancel the scroll or not.

Default: true

onStart

A callback function that should be called when scrolling has started. Receives the target element as a parameter.

Default: noop

onDone

A callback function that should be called when scrolling has ended. Receives the target element as a parameter.

Default: noop

onCancel

A callback function that should be called when scrolling has been aborted by the user (user scrolled, clicked etc.). Receives the abort event and the target element as parameters.

Default: noop

x

Whether or not we want scrolling on the x axis

Default: false

y

Whether or not we want scrolling on the y axis

Default: true

Easing

Easing is calculated using bezier-easing so you can pass your own values into options.easing in the form of an array with 4 values, or you can use any of the default easings by referencing their names as strings (ease, linear, ease-in, ease-out, ease-in-out).

vue-scrollto uses the following values for the default easings:

let easings = {
    'ease': [0.25, 0.1, 0.25, 1.0],
    'linear': [0.00, 0.0, 1.00, 1.0],
    'ease-in': [0.42, 0.0, 1.00, 1.0],
    'ease-out': [0.00, 0.0, 0.58, 1.0],
    'ease-in-out': [0.42, 0.0, 0.58, 1.0]
}

Simultaneous Scrolling

If you need to scroll multiple containers simultaneously, you can import the scroller factory directly and create multiple instances. (Using the default scrollTo methods allows for only one scroll action at a time for performance reasons.)

import {scroller} from 'vue-scrollto/src/scrollTo'
const firstScrollTo = scroller()
const secondScrollTo = scroller()
firstScrollTo('#el1')
secondScrollTo('#el2')

License

MIT

GitHub

https://github.com/rigor789/vue-scrollTo
Comments
  • 1. Not scrolling enough?

    Hi. Not sure it's a bug report or a question. I have a SPA built with Vue2 with some fixed headers / banners on top of the page (which has a body with height:100%).

    I split the remaining space of the page into columns, inside which I have bootstrap3 tables (1 table per column, and the table itself has only 1 column). I want to be able to scroll one table with arrows.

    vue-scrollto basically works, but doesn't scroll enough. I can navigate from one table cell to the next, but at some point the active cell is out of the screen. As if the scroll wasn't enough. I played a lot with offset but it seems to have no effect whatsoever in my case.

    You can try yourself in this page: https://www.arcsecond.io/objects/HD%205981 Wait for the Publications column to fill completely, and click on one cell, then navigate with up/down arrows.

    Thanks in advance for checking!

    Reviewed by onekiloparsec at 2017-09-03 13:55
  • 2. Scrollto errors inside container

    Hello Rigor, how are you?

    i have not been able to fix the error i see in behavior when i use scrollto in a side bar, going down works fine but i cannot go back up, it stops halfway. Anyway ideas?

    Reviewed by nicolasvahidzein at 2017-07-18 14:11
  • 3. Using scroll to programatically?

    Hey!

    I'm trying to implement scrolling programatically, I have a method called calculate that when called - I validate a form, submit a HTTP request then I want to scroll to an element.

    Here is the barebones of what I have.

    import Vue from 'vue';
    import VueScrollTo from 'vue-scrollto';
    
    Vue.use(VueScrollTo);
    
    new Vue({
    
        el: '#app',
    
        methods: {
    
            calculate: function() {
                // Validation
                // HTTP request
                // ...
                // Then scroll
                VueScrollTo.scrollTo('#calculator');
            }
    
        }
    
    });
    

    At the moment, it doesn't scroll - am I doing something wrong? Or should this be working?

    Thanks!

    Reviewed by joedawson at 2017-03-16 08:54
  • 4. is there a way to detect if the page is already scrolling ?

    for example lets say the user scrolled a page twice so fast before the scroll has finished "like using a keyboard" atm the package will scroll the first time then a second time which produce a flicker.

    so how to avoid that ?

    using a smaller duration fix it to some level, but the flicker is still there 😢

    Reviewed by ctf0 at 2017-10-25 17:15
  • 5. add timeout to config?

    In my scenario the anchors I want to add the v-scroll-to on are also tab headers that make a tab panel appear

    right now the scroll-to only works if I click twice and I imagine the reason for this is that on the first click the tab panel isn't yet shown on the page so the scroll-to doesn't know where to scroll (or has nothing to scroll to yet). If I could add just the tiniest delay so it would try to effectuate the scroll say 50ms after the click then I think it would work.

    now instead I am forced to add the scroll to programatically in the tab-show function but I would have preferred to add a general timeout on all scroll-to operations. Is this possible?

    Reviewed by vesper8 at 2017-06-03 03:06
  • 6. [vue-scrollto warn]: Trying to scroll to an element that is not on the page

    When using the module I get a warning (and no scrolling): [vue-scrollto warn]: Trying to scroll to an element that is not on the page: #e6e3ac7024ecfa178be642e249b42527

    The id is present on the page (generated in the template in a child component from the component where the scrollto is called from).

    This is the code used to call the scrollto: VueScrollTo.scrollTo('#' + this.exercise.id, 200, { container: 'body' });

    What could be the problem?

    Reviewed by ahallez at 2018-01-12 21:04
  • 7. Horizontal scroll start and end events fired multiple times; no scroll happening

    First of all, thanks a lot for this package.

    I'm having some trouble adding it to my Nuxt.js app. What I'm basically trying to do is scroll to a particular <li> in an "infinite" width container, so that whenever I land on a particular ID (a composer), the list shows said composer within the viewport:

    layout

    The code

    <template>
      <ul id="list">
        <li v-for="composer in composers" :key="composer.id" :id="'composer-' + composer.id">
          <nuxt-link :to="{ name: 'composers-id', params: { id: composer.id } }">
            <photo :composer="composer"></photo>
            <div>{{ composer.name }}</div>
          </nuxt-link>
        </li>
      </ul>
    </template>
    
    export default {
      // ...
      data () {
        return {
          options: {
            container: '#list',
            onStart: (element) => {
              console.log('start', element)
            },
            onDone: (element) => {
              console.log('done', element)
            },
            x: true,
            y: false
          }
        }
      },
      mounted () {
        this.manualScroll()
      },
      methods: {
        manualScroll () {
            // Should scroll to i.e. #composer-40
            this.$scrollTo('#composer-' + this.$route.params.id, 500, this.options)
        }
      }
    }
    

    The output

    output

    I'm clueless as to why this is happening. Any idea would be appreciated.

    Reviewed by sergiocastrovale at 2018-06-09 02:39
  • 8. No errors yet not working

    Hello and congrats again on a great module. However i can't get it to work. Is this an error on my part?

    I'm using webpack base config. I am loading the module in the main.js file like so:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import VueScrollTo from 'vue-scrollto'
    
    Vue.config.productionTip = false
    
    Vue.use(VueScrollTo)
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      template: '<App/>',
      components: { App }
    })
    

    and in app.vue i am trying to programmatically move it as i was not able to do it either with simple buttons either:

    import Vue from 'vue'
    import VueBar from 'vuebar'
    
    Vue.use(VueBar)
    
    export default {
      name: 'app',
      components: {
      },
      mounted () {
        console.log('about to force scroll')
        this.$scrollTo('#element', 1000, { easing: 'ease' })
      }
    }
    

    And the html:

    <h3 id="elementtop">HOLA</h3>
    
            <button v-scroll-to="'#element'">
                Scroll to #element
            </button>
    
            <br><br><br><br><br><br><br><br>test<br><br><br><br><br><br>test2<br><br><br><br>HOLA<br><br><br><br><br><br><br><br><br><br>test<br><br><br>test2<br><br><br><br><br><br>test<br><br><br>test2<br><br>HOLA<br><br><br><br><br>test<br><br><br>test2<br><br>HOLA BOSS<br><br><br><br><br>test<br><br><br>test2<br><br>HOLA BOSS<br><br><br><br><br>test<br><br><br>test2<br><br>HOLA BOSS<br><br><br><br><br>test<br><br><br>
    
    <h3 id="element">test2</h3><br><br>
    
    Reviewed by nicolasvahidzein at 2017-07-07 06:06
  • 9. Easings in Chrome

    Versions

    vue 2.6.10 vue-scrollto 2.17.1

    Description

    The scroll movement differs in the browsers. In Chrome, everything looks like an easing function (starts reeeeeally slow, speeds up like hell) although I set it to be linear. However, it looks fine in Firefox and Safari.

    Is this a known issue??

    Reviewed by zangab at 2019-12-13 17:18
  • 10. Scroll to anchor in different page

    Hey everyone,

    first of all I must say that I really like this plugin. It just works and makes scrollto actions super easy.

    I used it for the main navigation of a landing page. But this landing page also has some sort of sub pages like imprint and login. My question now is: (How) can I use the plugin to always link to the homepage (landingpage) and scroll to the given anchor. Is that possible?

    Thanks!

    Reviewed by bart at 2018-08-13 08:12
  • 11. onDone called even if not defined.

    The code from commit

    https://github.com/rchl/vue-scrollto/commit/9925f183f9ae14ade7a9c84d142de4c0fc397665

    calls 'onDone' even if it is not defined. That results in:

    vue.runtime.esm.js:620 [Vue warn]: Error in v-on handler: "TypeError: onDone is not a function"

    Reviewed by gdsowl at 2019-04-15 08:05
  • 12. Bump rollup from 2.51.0 to 2.78.0

    Bumps rollup from 2.51.0 to 2.78.0.

    Release notes

    Sourced from rollup's releases.

    v2.78.0

    2022-08-14

    Features

    • Support writing plugin hooks as objects with a "handler" property (#4600)
    • Allow changing execution order per plugin hook (#4600)
    • Add flag to execute plugins in async parallel hooks sequentially (#4600)

    Pull Requests

    v2.77.3

    2022-08-11

    Bug Fixes

    • Correctly resolve preserveModulesRoot in Vite (#4591)

    Pull Requests

    v2.77.2

    2022-07-27

    Bug Fixes

    • Avoid a rendering failure when mixing outputs with inlined and non-inlined dynamic imports (#4589)

    Pull Requests

    v2.77.1

    2.77.1

    2022-07-26

    Bug Fixes

    • Ensure IIFE output generates a global variable when generating ES5 (#4588)

    Pull Requests

    ... (truncated)

    Changelog

    Sourced from rollup's changelog.

    2.78.0

    2022-08-14

    Features

    • Support writing plugin hooks as objects with a "handler" property (#4600)
    • Allow changing execution order per plugin hook (#4600)
    • Add flag to execute plugins in async parallel hooks sequentially (#4600)

    Pull Requests

    2.77.3

    2022-08-11

    Bug Fixes

    • Correctly resolve preserveModulesRoot in Vite (#4591)

    Pull Requests

    2.77.2

    2022-07-27

    Bug Fixes

    • Avoid a rendering failure when mixing outputs with inlined and non-inlined dynamic imports (#4589)

    Pull Requests

    2.77.1

    2022-07-26

    Bug Fixes

    • Ensure IIFE output generates a global variable when generating ES5 (#4588)

    Pull Requests

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-08-15 09:03
  • 13. Bump @babel/preset-env from 7.14.4 to 7.18.10

    Bumps @babel/preset-env from 7.14.4 to 7.18.10.

    Release notes

    Sourced from @​babel/preset-env's releases.

    v7.18.10 (2022-08-01)

    :rocket: New Feature

    • babel-helper-string-parser, babel-types

    :bug: Bug Fix

    • babel-parser
    • babel-helper-string-parser, babel-parser
    • babel-plugin-transform-typescript
    • babel-plugin-transform-react-jsx
    • babel-generator
    • babel-helper-wrap-function, babel-plugin-transform-async-to-generator, babel-traverse

    :house: Internal

    :microscope: Output optimization

    • babel-plugin-proposal-export-default-from

    Committers: 10

    ... (truncated)

    Changelog

    Sourced from @​babel/preset-env's changelog.

    v7.18.10 (2022-08-01)

    :rocket: New Feature

    • babel-helper-string-parser, babel-types

    :bug: Bug Fix

    • babel-parser
    • babel-helper-string-parser, babel-parser
    • babel-plugin-transform-typescript
    • babel-plugin-transform-react-jsx
    • babel-generator
    • babel-helper-wrap-function, babel-plugin-transform-async-to-generator, babel-traverse

    :house: Internal

    :microscope: Output optimization

    • babel-plugin-proposal-export-default-from

    v7.18.9 (2022-07-18)

    :bug: Bug Fix

    • babel-plugin-transform-modules-systemjs, babel-types
    • babel-generator

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-08-02 09:10
  • 14. Bump @babel/core from 7.14.3 to 7.18.10

    Bumps @babel/core from 7.14.3 to 7.18.10.

    Release notes

    Sourced from @​babel/core's releases.

    v7.18.10 (2022-08-01)

    :rocket: New Feature

    • babel-helper-string-parser, babel-types

    :bug: Bug Fix

    • babel-parser
    • babel-helper-string-parser, babel-parser
    • babel-plugin-transform-typescript
    • babel-plugin-transform-react-jsx
    • babel-generator
    • babel-helper-wrap-function, babel-plugin-transform-async-to-generator, babel-traverse

    :house: Internal

    :microscope: Output optimization

    • babel-plugin-proposal-export-default-from

    Committers: 10

    ... (truncated)

    Changelog

    Sourced from @​babel/core's changelog.

    v7.18.10 (2022-08-01)

    :rocket: New Feature

    • babel-helper-string-parser, babel-types

    :bug: Bug Fix

    • babel-parser
    • babel-helper-string-parser, babel-parser
    • babel-plugin-transform-typescript
    • babel-plugin-transform-react-jsx
    • babel-generator
    • babel-helper-wrap-function, babel-plugin-transform-async-to-generator, babel-traverse

    :house: Internal

    :microscope: Output optimization

    • babel-plugin-proposal-export-default-from

    v7.18.9 (2022-07-18)

    :bug: Bug Fix

    • babel-plugin-transform-modules-systemjs, babel-types
    • babel-generator

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-08-02 09:07
  • 15. Bump terser from 4.8.0 to 4.8.1

    Bumps terser from 4.8.0 to 4.8.1.

    Changelog

    Sourced from terser's changelog.

    v4.8.1 (backport)

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.
    Reviewed by dependabot[bot] at 2022-07-20 04:28
  • 16. Bump @babel/plugin-transform-object-assign from 7.12.13 to 7.18.6

    Bumps @babel/plugin-transform-object-assign from 7.12.13 to 7.18.6.

    Release notes

    Sourced from @​babel/plugin-transform-object-assign's releases.

    v7.18.6 (2022-06-27)

    :eyeglasses: Spec Compliance

    :bug: Bug Fix

    • babel-helper-remap-async-to-generator, babel-plugin-proposal-async-generator-functions
    • babel-plugin-transform-parameters
    • babel-core
    • babel-core, babel-helper-check-duplicate-nodes, babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining, babel-plugin-transform-runtime

    :house: Internal

    • babel-standalone
    • Other
    • babel-generator, babel-types
    • babel-code-frame, babel-core, babel-generator, babel-helper-annotate-as-pure, babel-helper-builder-binary-assignment-operator-visitor, babel-helper-builder-react-jsx, babel-helper-check-duplicate-nodes, babel-helper-compilation-targets, babel-helper-create-class-features-plugin, babel-helper-create-regexp-features-plugin, babel-helper-define-map, babel-helper-explode-assignable-expression, babel-helper-fixtures, babel-helper-function-name, babel-helper-hoist-variables, babel-helper-member-expression-to-functions, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-optimise-call-expression, babel-helper-plugin-test-runner, babel-helper-plugin-utils, babel-helper-remap-async-to-generator, babel-helper-replace-supers, babel-helper-simple-access, babel-helper-split-export-declaration, babel-helper-transform-fixture-test-runner, babel-helper-validator-option, babel-helper-wrap-function, babel-helpers, babel-highlight, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-external-helpers, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-static-block, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-function-bind, babel-plugin-proposal-function-sent, babel-plugin-proposal-json-strings, babel-plugin-proposal-object-rest-spread, babel-plugin-proposal-optional-chaining, babel-plugin-proposal-partial-application, babel-plugin-proposal-pipeline-operator, babel-plugin-proposal-private-property-in-object, babel-plugin-proposal-record-and-tuple, babel-plugin-syntax-typescript, babel-plugin-transform-block-scoped-functions, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-computed-properties, babel-plugin-transform-destructuring, babel-plugin-transform-duplicate-keys, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-flow-comments, babel-plugin-transform-flow-strip-types, babel-plugin-transform-for-of, babel-plugin-transform-function-name, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-object-super, babel-plugin-transform-parameters, babel-plugin-transform-property-mutators, babel-plugin-transform-proto-to-assign, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-display-name, babel-plugin-transform-react-inline-elements, babel-plugin-transform-react-jsx-compat, babel-plugin-transform-react-jsx-source, babel-plugin-transform-react-jsx, babel-plugin-transform-runtime, babel-plugin-transform-typescript, babel-plugin-transform-unicode-escapes, babel-preset-env, babel-preset-typescript, babel-standalone, babel-template, babel-traverse, babel-types
    • babel-core, babel-helper-transform-fixture-test-runner, babel-plugin-transform-destructuring

    Committers: 6

    v7.18.5 (2022-06-13)

    Thanks @​underfin and @​vasicvuk for your first PRs!

    :bug: Bug Fix

    :memo: Documentation

    ... (truncated)

    Changelog

    Sourced from @​babel/plugin-transform-object-assign's changelog.

    v7.18.6 (2022-06-27)

    :eyeglasses: Spec Compliance

    :bug: Bug Fix

    • babel-helper-remap-async-to-generator, babel-plugin-proposal-async-generator-functions
    • babel-plugin-transform-parameters
    • babel-core
    • babel-core, babel-helper-check-duplicate-nodes, babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining, babel-plugin-transform-runtime

    :house: Internal

    • babel-standalone
    • Other
    • babel-generator, babel-types
    • babel-code-frame, babel-core, babel-generator, babel-helper-annotate-as-pure, babel-helper-builder-binary-assignment-operator-visitor, babel-helper-builder-react-jsx, babel-helper-check-duplicate-nodes, babel-helper-compilation-targets, babel-helper-create-class-features-plugin, babel-helper-create-regexp-features-plugin, babel-helper-define-map, babel-helper-explode-assignable-expression, babel-helper-fixtures, babel-helper-function-name, babel-helper-hoist-variables, babel-helper-member-expression-to-functions, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-optimise-call-expression, babel-helper-plugin-test-runner, babel-helper-plugin-utils, babel-helper-remap-async-to-generator, babel-helper-replace-supers, babel-helper-simple-access, babel-helper-split-export-declaration, babel-helper-transform-fixture-test-runner, babel-helper-validator-option, babel-helper-wrap-function, babel-helpers, babel-highlight, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-external-helpers, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-static-block, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-function-bind, babel-plugin-proposal-function-sent, babel-plugin-proposal-json-strings, babel-plugin-proposal-object-rest-spread, babel-plugin-proposal-optional-chaining, babel-plugin-proposal-partial-application, babel-plugin-proposal-pipeline-operator, babel-plugin-proposal-private-property-in-object, babel-plugin-proposal-record-and-tuple, babel-plugin-syntax-typescript, babel-plugin-transform-block-scoped-functions, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-computed-properties, babel-plugin-transform-destructuring, babel-plugin-transform-duplicate-keys, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-flow-comments, babel-plugin-transform-flow-strip-types, babel-plugin-transform-for-of, babel-plugin-transform-function-name, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-object-super, babel-plugin-transform-parameters, babel-plugin-transform-property-mutators, babel-plugin-transform-proto-to-assign, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-display-name, babel-plugin-transform-react-inline-elements, babel-plugin-transform-react-jsx-compat, babel-plugin-transform-react-jsx-source, babel-plugin-transform-react-jsx, babel-plugin-transform-runtime, babel-plugin-transform-typescript, babel-plugin-transform-unicode-escapes, babel-preset-env, babel-preset-typescript, babel-standalone, babel-template, babel-traverse, babel-types
    • babel-core, babel-helper-transform-fixture-test-runner, babel-plugin-transform-destructuring

    v7.18.5 (2022-06-13)

    :bug: Bug Fix

    :memo: Documentation

    :house: Internal

    ... (truncated)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-28 09:08
  • 17. Bump prettier from 1.19.1 to 2.7.1

    Bumps prettier from 1.19.1 to 2.7.1.

    Release notes

    Sourced from prettier's releases.

    2.7.1

    🔗 Changelog

    2.7.0

    diff

    🔗 Release note

    2.6.2

    🔗 Changelog

    2.6.1

    🔗 Changelog

    2.6.0

    🔗 Release note

    2.5.1

    🔗 Changelog

    2.5.0

    diff

    🔗 Release note

    2.4.1

    🔗 Changelog

    2.4.0

    diff

    Release note

    2.3.2

    changelog

    v2.3.1

    Changelog

    2.3.0

    diff

    🔗 Release Notes

    2.2.1

    🔗 Changelog

    2.2.0

    diff

    ... (truncated)

    Changelog

    Sourced from prettier's changelog.

    2.7.1

    diff

    Keep useful empty lines in description (#13013 by @​chimurai)

    # Input
    """
    First line
    

    Second Line """ type Person { name: String }

    Prettier 2.7.0

    """ First line Second Line """ type Person { name: String }

    Prettier 2.7.1

    """ First line

    Second Line """ type Person { name: String }

    2.7.0

    diff

    🔗 Release Notes

    2.6.2

    diff

    Fix LESS/SCSS format error (#12536 by @​fisker)

    ... (truncated)

    Commits
    • eeed611 Release 2.7.1
    • 794d9d1 bugfix(graphql): Keep useful empty lines in description (#13013)
    • dd2af6f Fix --skip-dependencies-install
    • b21772b Allow skip depencies install & set repo
    • 5530ad2 Merge branch 'main' of github.com:prettier/prettier
    • c7c9930 Clean changelog
    • 448786f Revert changes in release script
    • 6b388fa Add truncate
    • 109333a Git blame ignore 2.7.0
    • 59ec4f2 Bump Prettier dependency to 2.7.0
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by prettier-bot, a new releaser for prettier since your current version.


    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    Reviewed by dependabot[bot] at 2022-06-16 09:02
Vue component that provides content scrolling and zooming using mouse events or two fingers pinch on a mobile devices
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

Aug 11, 2022
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Aug 6, 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

May 19, 2022
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

Jul 29, 2022
🖱️ Vue directive to keep things scrolled to the bottom.

Installing Using a package manager (recommended) The recommended way of installing vue-chat-scroll is using the npm package with the npm (or yarn) pac

Jul 25, 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

Jul 31, 2022
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

May 24, 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

Mar 2, 2022
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install

May 19, 2021
A tiny Vue directive that stop propagation scroll when edge reached
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

Feb 4, 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

Aug 6, 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

Jul 31, 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

Jul 10, 2022
A Vue directive to wrap @jlmake's excellent ScrollReveal library.

vue-scroll-reveal A Vue directive to wrap @jlmakes' excellent ScrollReveal library. The directive exposes reset, nodesktop, and nomobile as modifiers

Jul 27, 2022
Scroll-lock directive for vue.js(2.0)

Scroll-lock directive for vue.js(2.0)

Apr 1, 2020
⌨️ 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

Aug 8, 2022
⚡️A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Vue-Pull-To A pull-down refresh and pull-up load more and infinite scroll component for Vue.js.

Aug 3, 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

Aug 5, 2022
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Jun 14, 2022