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

Related tags

vue-scrollactive
Overview

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 scroll
  • Scrolls to item's section on click
  • Configurable easing scroll effect
  • Emits events for full control

Make sure to check the demo where you can play around with every option.

Installation

Install using yarn

yarn add vue-scrollactive

or npm

npm install --save vue-scrollactive

then install the plugin

import VueScrollactive from 'vue-scrollactive';

Vue.use(VueScrollactive);

Or if you wish to include it in a script tag, just download the source code from the latest release here and include the vue-scrollactive.min.js file located in the dist folder in your page as a script:

<script src="dist/vue-scrollactive.min.js"></script>

If you're not running any transpiler like babel, you'll most likely need to install a Promise polyfill such as this to support older browsers since this library depends on promises to work.

Usage

The primary way to use the plugin is to wrap your menu in a <scrollactive> tag (which will be your nav) and add a .scrollactive-item class in your <a> tags as I show in the example below:

<scrollactive class="my-nav">
  <a href="#home" class="scrollactive-item">Home</a>
  <a href="#about-us" class="scrollactive-item">About Us</a>
  <a href="#portfolio" class="scrollactive-item">Portfolio</a>
  <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>

You can follow whatever structure you wish, just make sure to set the .scrollactive-item class in the items you want to highlight and set its href with a valid element ID that you would like to track while scrolling.

The secondary way to use it is almost the same as the primary but instead of relying on href to find your sections you'll need to set a data attribute data-section-selector on your elements with the section selector you wish to have.

<scrollactive class="my-nav">
  <span data-section-selector="#home" class="scrollactive-item">Home</span>
  <span data-section-selector=".about-us" class="scrollactive-item">About Us</span>
  <span data-section-selector=".portfolio div span" class="scrollactive-item">Portfolio</span>
  <span data-section-selector="#contact" class="scrollactive-item">Contact</span>
</scrollactive>

As you can see this gives you more freedom to choose different tags and you can use whatever CSS selector you find necessary, but it's important to notice that data-section-selector takes precedence over href, so if you have a tag <a href="#section-1" data-section-selector="#another-section"> it will completely ignore the #section-1 and use #another-section instead.

Events

Scrollactive will emit an itemchanged(event, currentItem, lastActiveItem) event when an active menu item is changed to another. You can catch that event doing as the example below:

<scrollactive class="my-nav" v-on:itemchanged="onItemChanged">
  <a href="#home" class="scrollactive-item">Home</a>
  <a href="#about-us" class="scrollactive-item">About Us</a>
  <a href="#portfolio" class="scrollactive-item">Portfolio</a>
  <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>
// ...
methods: {
  onItemChanged(event, currentItem, lastActiveItem) {
    // here you have access to everything you need regarding that event
  },
},
// ...

Configuration

All options should be passed as a prop in the <scrollactive> component as you can see in the example below:

<scrollactive active-class="active" :offset="80" :duration="800" bezier-easing-value=".5,0,.35,1">
</scrollactive>

Remember that all options are optional and you can check the default values below:

Options

/**
 * Active class that will be applied to the active item.
 */
activeClass: {
  type: String,
  default: 'is-active',
},

/**
 * Amount of space between top of screen and the section to highlight. (Usually your fixed
 * header's height).
 */
offset: {
  type: Number,
  default: 20,
},

/**
 * Amount of space between the top of the screen and the section to highlight when clicking a
 * scrollactive item to scroll. It will use the value of the `offset` prop if none is provided
 * here. Useful when you want to use the `offset` prop to make an item be active as soon as
 * it shows on the screen but still scroll to the top of the section when clicking the item.
 */
scrollOffset: {
  type: Number,
  default: null,
},

/**
 * The selector string of the scroll container element you'd like to use. It defaults to the
 * window object (most common), but you might want to change in case you're using an element
 * as container with overflow.
 */
scrollContainerSelector: {
  type: String,
  default: '',
},

/**
 * Enables/disables the scrolling when clicking in a menu item.
 * Disable if you'd like to handle the scrolling by your own.
 */
clickToScroll: {
  type: Boolean,
  default: true,
},

/**
 * The duration of the scroll animation when clicking to scroll is activated.
 */
duration: {
  type: Number,
  default: 600,
},

/**
 * Defines if the plugin should track the section change when clicking an item to scroll to
 * its section. If set to true, it will always keep track and change the active class to the
 * current section while scrolling, if false, the active class will be immediately applied to
 * the clicked menu item, ignoring the passed sections until the scrolling is over.
 */
alwaysTrack: {
  type: Boolean,
  default: false,
},

/**
 * Your custom easing value for the click to scroll functionality.
 * It must be a string with 4 values separated by commas in a cubic bezier format.
 */
bezierEasingValue: {
  type: String,
  default: '.5,0,.35,1',
},

/**
 * Decides if the URL should be modified with the section id when clicking a scrollactive
 * item.
 */
modifyUrl: {
  type: Boolean,
  default: true,
},

/**
 * If true the active class will only be applied when a section matches exactly one of the
 * scrollactive items, meaning it will be highlighted when scrolling exactly inside the
 * section. If false (default) it will always highlight the last item which was matched
 * in a section, even if it is already outside that section (and not inside another that's
 * being tracked).
 */
exact: {
  type: Boolean,
  default: false,
},

/**
 * If true the active class will be applied to the first scrollactive-item before you scroll
 * past it (even if you didn't reach it yet).
 */
highlightFirstItem: {
  type: Boolean,
  default: false,
},

/**
 * Changes the scrollactive container component html tag.
 */
tag: {
  type: String,
  default: 'nav',
},

/**
 * If true the screen will scroll down to the element in the URL when the component is mounted.
 */
scrollOnStart: {
  type: Boolean,
  default: true,
},

Contributing

Clone the repository and install the dependencies running yarn. After the dependencies are installed you should be good to run yarn start which will load up a server with the sandbox for you to play around.

Issues
  • Scroll a container

    Scroll a container

    Is it possible to target scroll a container instead of body? ✌️

    opened by henrikdahl 15
  • Error

    Error "You must give your menu items a class of 'scrollactive-item' in order to track them."

    Hi, I'm new to VueJS.

    I tried to use it but it gives me Error: You must give your menu items a class of 'scrollactive-item' in order to track them. But I already gave the class name to the <a> tag, I tried to call the dynamicItemsFunction after but the same error persists. When the link is clicked, I get this error Cannot read property 'substr' of undefined from: var targetDistanceFromTop = this.getOffsetTop(document.getElementById(event.target.hash.substr(1)));

    below is my html code, Thank you for your help!

    <div class="menu-wrapper" :style="{marginTop: 0.117 * bodyWidth + 'px'}">
        <div class="catalogue">
            <scrollactive ref="scrollactive" :offset="offset" :always-track="alwaysTrack" :duration="duration" :click-to-scroll="clickToScroll" :bezier-easing-value="easing">
                <a v-for="aCat in cataArr" v-bind:key="aCat" class="scrollactive-item" href="'#' + aCat.substr(0, 10)">
                    <div class="each-cat">
                        {{aCat}}
                    </div>
                </a>
            </scrollactive>
        </div>
        <div class="items-wrapper">
            <div class="each-cat-item" v-if="formatCats.length>0" v-for="aCat in formatCats" v-bind:key="aCat" :id="aCat.substr(0, 10)">
                {{aCat}}
                <div class="each-item" v-for="anItem in posts[aCat]" v-bind:key="anItem">
                    <div class="item-img" v-if="anItem.photos && anItem.photos.length > 0" @click="jump(anItem)">
                    </div>
                </div>
            </div>
        </div>
    </div>
    opened by craigyu 10
  • Apply active class to an element when none are in the viewport

    Apply active class to an element when none are in the viewport

    Hi, I'd like to be able to apply the active class to the first element in the nav when none of the sections are in the viewport, is this possible?

    At the moment I'm adding the active class in my markup but when the component is mounted it removes all instances of the class.

    Here's an example of what is happening right now (I'd like "popular" to be active before a sections is scrolled into view):

    oct-06-2018 21-27-24

    Would you consider adding this via an option? Something like firstItemActive?

    I'm happy to submit a pull request.

    opened by DamianMullins 10
  • Scrollspy doesn't work on iPhone?

    Scrollspy doesn't work on iPhone?

    Hello. I noticed that scrollspy functional doesn't work on iOS. Is this wanted behavior?

    opened by hackuun 8
  • Error in mounted hook:

    Error in mounted hook: "TypeError: Cannot read property 'offsetHeight' of null"

    if there is a scrollactive-item that have a href does not exist in the page, the mounting process will throw an error "TypeError: Cannot read property 'offsetHeight' of null"

    Which is right because the target does not exist, but this should not kill the mounting process, instead, it should output a warning to console. However, there seems have no problem with the code, because a simple rebuild resolves this issue.

    opened by simon300000 8
  • Scrolling does not change the hash of the url

    Scrolling does not change the hash of the url

    only change the hash by click

    opened by wellfrog16 7
  • Multiple scrollactive on the page cause glitches

    Multiple scrollactive on the page cause glitches

    Hi there. Awesome plugin, but unfortunately I found out that it has issue, if I am trying to use multiple scrollactive on single page. For example, I have 2 navigations, main and mobile. I want scrollactive on both. If I try that, then I have glitches. For example if you set :duration="1000" then scrollbar will jerk. Or, even :duration="100" will not work at all (small values).

    Is there's a way to fix it?

    bug 
    opened by hackuun 6
  • Bug: Last item has highlighted class on load

    Bug: Last item has highlighted class on load

    On page load the last item that has a binding receives the active class, which is wrong. When I scroll for just 1px it will be fixed. What's the problem?

    <scrollactive v-if="showNavText" active-class="router-link-exact-active" :offset="80" :duration="600"> <a class="navigation-text-desktop scrollactive-item" href="#home">News</a> <a class="navigation-text-desktop scrollactive-item" href="#links">Links</a> <a class="navigation-text-desktop scrollactive-item" href="#community">Community</a> </scrollactive>

    investigating 
    opened by sandrooco 6
  • Navigation breaks when using scrollactive AND router.

    Navigation breaks when using scrollactive AND router.

    Hi guys

    I have a page with a few different sections (all of these have a vue-scrollactive linking). When clicking on an item (let's say from #team), a detailpage opens (= route navigated, #/team/sandrooco). Then, when clicking on a back button, this.$router.go(-1); executes. The problem: Vue will not recognize #team as route (because it doesn't exist...) and the user will be lost (no navigation possible).

    I hope you understand it, it's quite complicated.

    I use vue-scrollactive 0.5.1 and vue 2.5.2.

    opened by sandrooco 6
  • Is it possible to trigger on elements on bottom of page?

    Is it possible to trigger on elements on bottom of page?

    If I have a section that isn't the full page height, is it still possible to trigger vue-scrollactive when it's in view?

    (btw if there is a better location to ask these questions let me know)

    opened by StefKors 6
  • Bump url-parse from 1.4.7 to 1.5.3

    Bump url-parse from 1.4.7 to 1.5.3

    Bumps url-parse from 1.4.7 to 1.5.3.

    Commits
    • ad44493 [dist] 1.5.3
    • c798461 [fix] Fix host parsing for file URLs (#210)
    • 201034b [dist] 1.5.2
    • 2d9ac2c [fix] Sanitize only special URLs (#209)
    • fb128af [fix] Use 'null' as origin for non special URLs
    • fed6d9e [fix] Add a leading slash only if the URL is special
    • 94872e7 [fix] Do not incorrectly set the slashes property to true
    • 81ab967 [fix] Ignore slashes after the protocol for special URLs
    • ee22050 [ci] Use GitHub Actions
    • d2979b5 [fix] Special case the file: protocol (#204)
    • Additional commits viewable in compare view

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump path-parse from 1.0.6 to 1.0.7

    Bump path-parse from 1.0.6 to 1.0.7

    Bumps path-parse from 1.0.6 to 1.0.7.

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump postcss from 7.0.30 to 7.0.36

    Bump postcss from 7.0.30 to 7.0.36

    Bumps postcss from 7.0.30 to 7.0.36.

    Release notes

    Sourced from postcss's releases.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by @​emzoumpo).
    Changelog

    Sourced from postcss's changelog.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.36

    • Backport ReDoS vulnerabilities from PostCSS 8.

    7.0.35

    • Add migration guide link to PostCSS 8 error text.

    7.0.34

    • Fix compatibility with postcss-scss 2.

    7.0.33

    • Add error message for PostCSS 8 plugins.

    7.0.32

    7.0.31

    • Use only the latest source map annotation (by Emmanouil Zoumpoulakis).
    Commits
    • 67e3d7b Release 7.0.36 version
    • 54cbf3c Backport ReDoS vulnerabilities from PostCSS 8
    • 12832f3 Release 7.0.35 version
    • 4455ef6 Use OpenCollective in funding
    • e867c79 Add migration guide to PostCSS 8 error
    • 32a22a9 Release 7.0.34 version
    • 2293982 Lock build targets
    • 2c3a111 Release 7.0.33 version
    • 4105f21 Use yaspeller instead of yaspeller-ci
    • c8d02a0 Revert yaspeller-ci removal
    • Additional commits viewable in compare view

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ws from 6.2.1 to 6.2.2

    Bump ws from 6.2.1 to 6.2.2

    Bumps ws from 6.2.1 to 6.2.2.

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump dns-packet from 1.3.1 to 1.3.4

    Bump dns-packet from 1.3.1 to 1.3.4

    Bumps dns-packet from 1.3.1 to 1.3.4.

    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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump browserslist from 4.12.0 to 4.16.6

    Bump browserslist from 4.12.0 to 4.16.6

    Bumps browserslist from 4.12.0 to 4.16.6.

    Changelog

    Sourced from browserslist's changelog.

    4.16.6

    • Fixed npm-shrinkwrap.json support in --update-db (by Geoff Newman).

    4.16.5

    • Fixed unsafe RegExp (by Yeting Li).

    4.16.4

    • Fixed unsafe RegExp.
    • Added artifactory support to --update-db (by Ittai Baratz).

    4.16.3

    • Fixed --update-db.

    4.16.2

    4.16.1

    • Fixed Chrome 4 with mobileToDesktop (by Aron Woost).

    4.16

    • Add browserslist config query.

    4.15

    • Add TypeScript types (by Dmitry Semigradsky).

    4.14.7

    • Fixed Yarn Workspaces support to --update-db (by Fausto Núñez Alberro).
    • Added browser changes to --update-db (by @​AleksandrSl).
    • Added color output to --update-db.
    • Updated package.funding to have link to our Open Collective.

    4.14.6

    • Fixed Yarn support in --update-db (by Ivan Storck).
    • Fixed npm 7 support in --update-db.

    4.14.5

    • Fixed last 2 electron versions query (by Sergey Melyukov).

    4.14.4

    • Fixed Unknown version 59 of op_mob error.

    4.14.3

    • Update Firefox ESR.

    4.14.2

    • Fixed --update-db on Windows (by James Ross).
    • Improved --update-db output.

    4.14.1

    • Added --update-db explanation (by Justin Zelinsky).

    ... (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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump hosted-git-info from 2.8.8 to 2.8.9

    Bump hosted-git-info from 2.8.8 to 2.8.9

    Bumps hosted-git-info from 2.8.8 to 2.8.9.

    Changelog

    Sourced from hosted-git-info's changelog.

    2.8.9 (2021-04-07)

    Bug Fixes

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for hosted-git-info 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump lodash from 4.17.15 to 4.17.21

    Bump lodash from 4.17.15 to 4.17.21

    Bumps lodash from 4.17.15 to 4.17.21.

    Commits
    • f299b52 Bump to v4.17.21
    • c4847eb Improve performance of toNumber, trim and trimEnd on large input strings
    • 3469357 Prevent command injection through _.template's variable option
    • ded9bc6 Bump to v4.17.20.
    • 63150ef Documentation fixes.
    • 00f0f62 test.js: Remove trailing comma.
    • 846e434 Temporarily use a custom fork of lodash-cli.
    • 5d046f3 Re-enable Travis tests on 4.17 branch.
    • aa816b3 Remove /npm-package.
    • d7fbc52 Bump to v4.17.19
    • Additional commits viewable in compare view
    Maintainer changes

    This version was pushed to npm by bnjmnt4n, a new releaser for lodash 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump ssri from 6.0.1 to 6.0.2

    Bump ssri from 6.0.1 to 6.0.2

    Bumps ssri from 6.0.1 to 6.0.2.

    Changelog

    Sourced from ssri's changelog.

    6.0.2 (2021-04-07)

    Bug Fixes

    • backport regex change from 8.0.1 (b30dfdb), closes #19

    Commits
    Maintainer changes

    This version was pushed to npm by nlf, a new releaser for ssri 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Bump y18n from 4.0.0 to 4.0.1

    Bump y18n from 4.0.0 to 4.0.1

    Bumps y18n from 4.0.0 to 4.0.1.

    Changelog

    Sourced from y18n's changelog.

    Change Log

    All notable changes to this project will be documented in this file. See standard-version for commit guidelines.

    5.0.5 (2020-10-25)

    Bug Fixes

    5.0.4 (2020-10-16)

    Bug Fixes

    • exports: node 13.0 and 13.1 require the dotted object form with a string fallback (#105) (4f85d80)

    5.0.3 (2020-10-16)

    Bug Fixes

    • exports: node 13.0-13.6 require a string fallback (#103) (e39921e)

    5.0.2 (2020-10-01)

    Bug Fixes

    5.0.1 (2020-09-05)

    Bug Fixes

    5.0.0 (2020-09-05)

    ⚠ BREAKING CHANGES

    • exports maps are now used, which modifies import behavior.
    • drops Node 6 and 4. begin following Node.js LTS schedule (#89)

    Features

    ... (truncated)

    Commits
    Maintainer changes

    This version was pushed to npm by oss-bot, a new releaser for y18n 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)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
Releases(v0.9.2)
  • v0.9.2(May 15, 2020)

    New

    • 07b0b1bb6d6b571873ccd1d6d8b72d0c92c0af65 Added possibility to use different tags as menu items as apart from only anchors, together with the possibility of using any CSS selector instead of only IDs for sections
    Source code(tar.gz)
    Source code(zip)
  • v0.9.1(May 15, 2020)

  • v0.8.0(Dec 2, 2018)

    New

    • Add a new prop to control the scroll offset when clicking to scroll 2d9b753fc6a479909ac4969437fab5d53364677f
    • Add possibility to highlight first item by default 91b6e90a552fd23c5de29d8435694aa9960da821
    • Add ability to specify the vue-scrollactive wrapper html tag 84bb4eb30951dce2800e1ca2a30e4d9b4c080c8d

    Fixes

    • Fix multiple active classes when scroling to a small section 711e5bc2ecb7ec5b831f948c062ad9f5f2ffb873
    • Fix itemchanged event not being fired when clicking items 964856454922257d0424c37e20319c9fa2d7c1f4
    • Fix elements with unicode IDs not being found when clicked 353c9c39893426ebad930904764c87dd0324943b
    • Fix scroll position without offset when passing a hash in URL c5c15973373eb1b8f7348762fc5a1e0e958446a4
    • Fix webpack global object definition 7207692a26cbbf80a6b3b5973a8c22e965f741a6
    Source code(tar.gz)
    Source code(zip)
  • v0.4.0(Jul 18, 2017)

    New

    • d18d823730060d92915ad2e66d352499bdbdc72a Added support for dynamic items in the scrollactive nav.
    • Added instructions in the docs to handle the dynamic items.
    • db79506cc19d83088a7784064e72339c5dc1dce7 The demo was remade for a much better experience with live settings.

    Fixes

    • Fixes some minor bugs.
    Source code(tar.gz)
    Source code(zip)
  • v0.3.0(Jul 15, 2017)

    New

    • 71bc0a8acf02116472c198c084465d068502a808 Added an itemchanged event that will fire after an active menu item has changed.

    Fixes

    • 969d55fade73c46b2d65c67bc0bf8b88b92d9c73 Changed the way the active class is added to the current menu item, making it much more simple and adding the class after it has passed the section header, not while in section block.
    • Fixed some typos and rewritten some sections in the README file.
    Source code(tar.gz)
    Source code(zip)
Owner
Mauricio Farias Dziedzinski
Software engineer living deliciously 🐐
Mauricio Farias Dziedzinski
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 494 Oct 12, 2021
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
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 167 Oct 12, 2021
Bring your scroll game to the next level!

VueNextLevelScroll - Bring your scroll game to the next level! "Click to scroll" component using the modern Browser API. ?? Features Just one tiny fil

Developmint GbR 49 Mar 2, 2021
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 6.1k Oct 13, 2021
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
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 169 Oct 14, 2021
Vue3.0 无缝滚动组件

vue3-seamless-scroll Vue3.0 无缝滚动组件 目前组件支持上下左右无缝滚动,单步滚动,并且支持复杂图标的无缝滚动,组件支持原生 css3动画 滚动,目前组件支持平台与Vue3.0支持平台一致。 效果展示 安装 npm npm install vue3-seamless-scr

null 15 Oct 7, 2021
Adds a directive that listens for click events and scrolls to elements.

vue-scrollto 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

Igor Randjelovic 1.8k Oct 13, 2021
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

André Lins 2 Oct 1, 2021
Customize the scrolling position on route navigation. Especially hash mode.

vue-scroll-behavior Customize the scrolling position on route navigation IE / Edge Firefox Chrome Safari Opera iOS Android IE9+, Edge ✓ ✓ ✓ ✓ ✓ ✓ Tabl

Yazhe Wang 136 Jul 13, 2021
Scrollspy for Vue2

vue2-scrollspy Scrollspy, and animated scroll-to, for Vue2, inspired by vue-scrollspy. See https://ibufu.github.io/vue2-scrollspy/ or Jsfiddle. Instal

morning 130 Sep 1, 2021
A super simple Vue component that allows fullscreen and horizontal scroll snapping.

Vue Scroll Snap A super simple Vue component that allows both fullscreen and horizontal scroll snapping. Showcase Check out the live demo to see the s

Angelo 26 Oct 12, 2021
A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

John Wu 57 Sep 30, 2021
A vue2 component based on Iscroll

vue-virtual-infinite-scroll a vue2 component based on Iscroll, supports big data list with high performance scroll, infinite load and pull refresh. Ba

Lei Zuo 45 Mar 4, 2021
🎉 Page scroll progress bar component for @vuejs

vue-scroll-progress ?? Simple Vue.js plugin for page scroll progress bar Live Demo Installation npm i vue-scroll-progress --save yarn add vue-scroll-p

Hyouk Seo 90 Oct 12, 2021
A Vue component that syncronize containers scroll positions

vue-scroll-sync A Vue component that syncronize containers scroll positions Installation npm i --save vue-scroll-sync Browser Include the script file,

null 20 Sep 30, 2021
A Vue.js component to top of the page

vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

Willy Hong 5 Sep 22, 2021
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 81 Oct 12, 2021