vue-comps-scrollspy

1.0.0 • Public • Published

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.0.0
    2
    • latest

Version History

  • Version
    Downloads (Last 7 Days)
    • Published
  • 1.0.0
    2
  • 0.1.0
    2

Package Sidebar

Install

npm i vue-comps-scrollspy

Weekly Downloads

4

Version

1.0.0

License

MIT

Last publish

Collaborators

  • paulpflug