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

Last update: Aug 5, 2022

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.

GitHub

https://github.com/eddiemf/vue-scrollactive/
Comments
  • 1. 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.

    Reviewed by DamianMullins at 2018-10-06 20:40
  • 2. 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>
    Reviewed by craigyu at 2017-08-04 19:02
  • 3. 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.

    Reviewed by simon300000 at 2018-06-15 19:23
  • 4. 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)

    Reviewed by StefKors at 2019-01-25 19:52
  • 5. 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.

    Reviewed by sandrooco at 2018-01-15 16:15
  • 6. 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>

    Reviewed by sandrooco at 2017-11-28 10:27
  • 7. 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?

    Reviewed by hackuun at 2017-10-15 21:51
  • 8. vue-scrollactive inside a viutify dialog doesn't work

    hi, i am trying to use vue-scrollactive inside a viutify dialog / modal but it doesn't work. I think it doesn't iterate over the dialogue.

    try scrollContainerSelector but it doesn't work either.

    I want to clarify that if it works for me outside the dialog / modal

    also when I click on an it doesn't work either

    could you help me please? thanks!

    image

    Reviewed by JorgeMantillaHernandez at 2020-05-30 17:40
  •     <li>
            <a href="#project-2" class="scrollactive-item"> Project 2 </a>
            <scrollactive active-class="submenu--active" tag="ul">
                <li>
                    <a href="#submenu-2-1" class="scrollactive-item"> Submenu 2-1 </a>
                </li>
                <li>
                    <a href="#submenu-2-2" class="scrollactive-item"> Submenu 2-2 </a>
                </li>
                <li>
                    <a href="#submenu-2-3" class="scrollactive-item"> Submenu 2-3 </a>
                </li>
                <li>
                    <a href="#submenu-2-4" class="scrollactive-item"> Submenu 2-4 </a>
                </li>
            </scrollactive>
        </li>
    </scrollactive>`
    

    but both classes add only on second scrollactive tag. How i can change it?

Reviewed by Excelsiorer at 2020-01-04 10:06
  • 10. Problem with entering hashed adresses

    My problem is that when I enter anchored position on page, eg. /#contact, it always renders at the top, not in the given position, when I disable scrollactive the problem ends.

    Reviewed by q-23 at 2019-03-06 02:16
  • 11. modifyUrl setting not useful

    show my code

    <scrollactive
          :modify-url="false"
          :always-track="true"
          :duration="800"
          bezier-easing-value=".5,0,.35,1"
    >
          <h-navbar
                  :slider="{
                    width: 50,
                    height: 4,
                    color: '#FF4A83',
                  }"
                  :tabs="tabs"
          >
                  <a :slot="`tab${index}`" :href="`#floor${index + 1}`" v-for="(item, index) in tabs" :key="index">{{item}}</a>
          </h-navbar>
    </scrollactive>
    

    as i set props modifyUrl to false but i find noting happend the url is also be modifyed, like: http://localhost:8080/#/course/courseList?courseId=COURSEID to http://localhost:8080/#/floor1 i do something error?

    Reviewed by gjycdd at 2018-07-17 07:07
  • 12. Bump terser from 4.6.13 to 4.8.1

    Bumps terser from 4.6.13 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)

    v4.8.0

    • Support for numeric separators (million = 1_000_000) was added.
    • Assigning properties to a class is now assumed to be pure.
    • Fixed bug where yield wasn't considered a valid property key in generators.

    v4.7.0

    • A bug was fixed where an arrow function would have the wrong size
    • arguments object is now considered safe to retrieve properties from (useful for length, or 0) even when pure_getters is not set.
    • Fixed erroneous const declarations without value (which is invalid) in some corner cases when using collapse_vars.
    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.

    Reviewed by dependabot[bot] at 2022-07-21 01:48
  • 13. Bump eventsource from 1.0.7 to 1.1.1

    Bumps eventsource from 1.0.7 to 1.1.1.

    Changelog

    Sourced from eventsource's changelog.

    1.1.1

    • Do not include authorization and cookie headers on redirect to different origin (#273 Espen Hovlandsdal)

    1.1.0

    • Improve performance for large messages across many chunks (#130 Trent Willis)
    • Add createConnection option for http or https requests (#120 Vasily Lavrov)
    • Support HTTP 302 redirects (#116 Ryan Bonte)
    • Prevent sequential errors from attempting multiple reconnections (#125 David Patty)
    • Add new to correct test (#111 Stéphane Alnet)
    • Fix reconnections attempts now happen more than once (#136 Icy Fish)
    Commits
    • aa7a408 1.1.1
    • 56d489e chore: rebuild polyfill
    • 4a951e5 docs: update history for 1.1.1
    • f9f6416 fix: strip sensitive headers on redirect to different origin
    • 9dd0687 1.1.0
    • 49497ba Update history for 1.1.0 (#146)
    • 3a38537 Update history for #136
    • 46fe04e Merge pull request #136 from icy-fish/master
    • 9a4190f Fix issue: reconnection only happends for 1 time after connection drops
    • 61e1b19 test: destroy both proxied request and response on close
    • 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.

    Reviewed by dependabot[bot] at 2022-06-01 16:14
  • 14. Bump async from 2.6.3 to 2.6.4

    Bumps async from 2.6.3 to 2.6.4.

    Changelog

    Sourced from async's changelog.

    v2.6.4

    • Fix potential prototype pollution exploit (#1828)
    Commits
    Maintainer changes

    This version was pushed to npm by hargasinski, a new releaser for async 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.

    Reviewed by dependabot[bot] at 2022-04-29 10:14
  • 15. Bump minimist from 1.2.5 to 1.2.6

    Bumps minimist from 1.2.5 to 1.2.6.

    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.

    Reviewed by dependabot[bot] at 2022-04-10 05:51
  • 16. Bump url-parse from 1.4.7 to 1.5.10

    Bumps url-parse from 1.4.7 to 1.5.10.

    Commits
    • 8cd4c6c 1.5.10
    • ce7a01f [fix] Improve handling of empty port
    • 0071490 [doc] Update JSDoc comment
    • a7044e3 [minor] Use more descriptive variable name
    • d547792 [security] Add credits for CVE-2022-0691
    • ad23357 1.5.9
    • 0e3fb54 [fix] Strip all control characters from the beginning of the URL
    • 61864a8 [security] Add credits for CVE-2022-0686
    • bb0104d 1.5.8
    • d5c6479 [fix] Handle the case where the port is specified but empty
    • 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.

    Reviewed by dependabot[bot] at 2022-02-27 04:40
  • 17. Bump follow-redirects from 1.11.0 to 1.14.8

    Bumps follow-redirects from 1.11.0 to 1.14.8.

    Commits
    • 3d81dc3 Release version 1.14.8 of the npm package.
    • 62e546a Drop confidential headers across schemes.
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 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.

    Reviewed by dependabot[bot] at 2022-02-13 13:09
  • 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.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.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 Back-to-top component for Vue.js, which scroll page to the top when clicked

    Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

    Aug 4, 2022
    A Back-to-top component for Vue.js, which scroll page to the top when clicked

    Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

    Aug 4, 2022
    A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

    A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

    Aug 8, 2022
    Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll
    Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll

    Vue2 Smooth Scroll Lightweight Vue plugin for smooth-scrolling extended from vue-smooth-scroll. For simple use-cases, the native scroll-behavior CSS p

    Jul 21, 2022
    Component that customizes the scroll and inserts shadow when scrolling exists
    Component that customizes the scroll and inserts shadow when scrolling exists

    Vue Scroll Shadow • • Component that customizes the scroll and inserts shadow when scrolling exists Installation NPM npm i vue-scroll-shadow # or yarn

    Feb 13, 2022
    ⌨️ 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
    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
    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
    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

    Jan 5, 2022
    Scroll to page top button, Vue.js component.

    vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser <script src="vue.js"></script> <script src="vue-go-top.min.js"></scr

    Apr 13, 2022
    🎉 Page scroll progress bar component for @vuejs
    🎉 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

    Jul 20, 2022
    A minimal, super simple browser scroll library with a convenient set of easy-to-use listeners and animate methods

    vert (beta) A minimal, super simple browser scroll library with a convenient set of easy-to-use listeners and animate methods. Vert is optimized using

    Feb 11, 2020
    A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

    infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

    May 10, 2022
    A sigle-page scroll plugin based on [email protected],support for mobile and PC .

    fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

    Apr 14, 2022
    A managed scroller to dynamically load items

    vue-managed-scroller View live demo in sandbox Installation npm install --save vue-managed-scroller or if you prefer yarn yarn add vue-managed-scroll

    Jul 21, 2021