Vue comps scrollspy

a simple scrollspy

Version: 1.0.0 Updated: 09/18/2016

By: vue-comps License: MIT

Downloads Last 30 Days: 113

vue-comps-scrollspy

Tracks, which element is currently in the viewport

Demo

On scrolling down, the target with the most area filling the space in the range [0.3-0.4] * viewportHeight is set active.
On scrolling up, the range [0.6-0.7] * viewportHeight is taken.

Install

npm install --save-dev vue-comps-scrollspy

or include build/bundle.js.

Usage

# in your component
components:
  "scrollspy": require("vue-comps-scrollspy")
  "scrollspy-item": require("vue-comps-scrollspy/scrollspy-item")
# or, when using bundle.js
components:
  "scrollspy": window.vueComps.scrollspy
  "scrollspy-item": window.vueComps.scrollspyItem
<scrollspy>
  <scrollspy-item target="someID">someDescription</scrollspy-item>
</scrollspy>

For examples see dev/.

Props

Scrollspy

Name type default description
transition Function see transtion function which gets used for scrolling item into view
activeClass String active class will be applied to active item
activeStyle String / Object "" style will be applied to active item

Scrollspy-item

Name type default description
target String or Element - string will be converted by document.getElementById

Transition

This is the default transition:

function (scrollBy, done) {
  window.scrollBy(0,scrollBy)

}

Always make sure you apply a little timeout before calling done

Example of vue-materialize for a transition with velocity:

Velocity = require("velocity-animate")
function (scrollBy, done) {
  var body = document.body
  var docEl = document.documentElement
  var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop
  scrollTop += scrollBy
  var duration = Math.abs(scrollBy)/3
  if (duration < 100) {
    duration = 100
  } else if (duration > 500) {
    duration = 500
  }
  Velocity(docEl, "scroll", {
    duration: duration,
    offset: scrollTop,
    complete: function() {setTimeout(done, 66)}
  })
}

Changelog

  • 1.0.0
    some cleaning
    added unit tests
    added transition, activeClass, activeStyle props
    added ability to directly give a element as target

Development

Clone repository.

npm install
npm run dev

Browse to http://localhost:8080/.

License

Copyright (c) 2016 Paul Pflugradt Licensed under the MIT license.

Categories: Vue js