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.

    Install

    npm i vue-comps-scrollspy

    DownloadsWeekly Downloads

    10

    Version

    1.0.0

    License

    MIT

    Last publish

    Collaborators

    • paulpflug