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

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.

Comments
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • vue-scrollactive inside a viutify dialog doesn't work

    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

    opened by JorgeMantillaHernandez 4
  • scrollactive inside other scrollactive

    scrollactive inside other scrollactive

  •     <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?

opened by Excelsiorer 4
  • Problem with entering hashed adresses

    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.

    opened by q-23 4
  • modifyUrl setting not useful

    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?

    help wanted 
    opened by gjycdd 4
  • Bump terser from 4.6.13 to 4.8.1

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump eventsource from 1.0.7 to 1.1.1

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump async from 2.6.3 to 2.6.4

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump minimist from 1.2.5 to 1.2.6

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump url-parse from 1.4.7 to 1.5.10

    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.

    dependencies 
    opened by dependabot[bot] 0
  • Bump follow-redirects from 1.11.0 to 1.14.8

    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.

    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 package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

    navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

    Honoré Nintunze 57 Mar 2, 2022
    Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

    Vue plugin that provides functionality for remembering scroll position and loaded items in a catalog page after navigating back and forth to a single item page, with customisable options.

    Giorgos Sideris 3 Aug 1, 2022
    A Vue.js directive for body scroll locking without breaking scrolling of a target element.

    v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

    Pete Hegman 182 Oct 1, 2022
    A Vue.js directive for body scroll locking without breaking scrolling of a target element.

    v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

    Pete Hegman 181 Aug 30, 2022
    A Vue directive to lock the body scroll without stopping the target element from scrolling

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

    Bram Honingh 30 Jul 10, 2022
    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

    Caio Fernandes 184 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

    Caio Fernandes 184 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.

    Roc Wong 158 Sep 30, 2022
    A Vue plugin which supervises binding element's scrolling and trigger target elements class

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

    null 0 Nov 27, 2020
    A Vue plugin which supervises binding element's scrolling and trigger target elements class

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

    Ranlizzz 2 Nov 5, 2020
    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

    xlaoyu 119 Aug 22, 2022
    Lightweight Vue plugin for smooth-scrolling extended from vue2-smooth-scroll.

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

    laineus 23 Aug 16, 2022
    Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

    Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

    chenronghui 0 Mar 1, 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 Feb 13, 2022
    Vue Scroll Detect - Detect component visibility change on scrolling

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

    Dzul Nizam 1 Jun 5, 2022
    Vue plugin to disable scrolling page

    Vue plugin to disable scrolling page

    17axaH 0 May 12, 2021
    Lightweight Vue plugin for smooth-scrolling.

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

    xlaoyu 12 Jun 7, 2022
    ⌨️ 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

    Haojen 34 Sep 20, 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

    Open Source Afghanistan 15 Jun 14, 2022