vue-comps-scrollspy

September 18, 2016 · View on GitHub

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/.