Nefarious Plastic Mannequins

    @xlaoyu/vue-scrollspy

    1.0.0 • Public • Published

    vue2-scrollspy

    Vue 2.x npm npm-downloades license

    Scrollspy, and animated scroll-to, for Vue2, extended vue2-scrollspy.

    Features

    • Can specify scrolling containers, not just scroll window viewport

    Installation

    $ npm install @xlaoyu/vue-scrollspy --save
    

    Setup

    import Vue from 'vue';
    import Scrollspy from '@xlaoyu/vue-scrollspy';
    Vue.use(Scrollspy);

    Usage

    <ul v-scroll-spy-active v-scroll-spy-link>
        <li>
            <a>Menu 1</a>
        </li>
        <li>
            <a>Menu 2</a>
        </li>
    </ul>
    
    <div v-scroll-spy>
        <div>
            <h1>Header 1</h1>
            <p>Content</p>
        </div>
        <div>
            <h1>Header 2</h1>
            <p>Content</p>
        </div>
    </div>

    v-scroll-spy

    Declares container of sections for elements to scrollspy.

    1. Use v-scroll-spy="{data: 'section'}" to add a section data property in scope Vue instance that is binded to the section index.

    2. Use v-scroll-spy="{allowNoActive: true}" to allow no active sections when scroll position is outside of the scrollspy container. Default behavior is too keep active at least one section in any case.

    3. Use v-scroll-spy="{offset: 50}" to add an offset for scroll and active events.

    4. Use v-scroll-spy="{time: 200, steps: 30}" to set the animation options.

    5. $scrollTo(index: int) is provided on scope Vue instance to invoke a scroll to the given section index.

    6. Use v-scroll-spy="{ container: '.right' }" specify scrolling containers, use document.querySelectorAll to find containers.

    v-scroll-spy-active

    Set the active css class on element that match the index of current scrollspy.

    1. Use v-scroll-spy-active="{selector: 'li.menu-item', class: 'custom-active'}" to customize elements selection and class name to apply. By default, it will use direct children and apply active class.

    v-scroll-spy-link

    Add click handler on children elements that will scroll to the related section.

    1. Use v-scroll-spy-link="{selector: 'a.menu-link'}" to customize elements selection. By default, it will use a to select all links.

    Note

    You should have the same number of children elements for v-scroll-spy, v-scroll-spy-active v-scroll-spy-link for directives to work properly.

    If you need to share multiple scroll-spy in the same page, you can add data-scroll-spy-id="" on each element where a directive is declared.

    If you want to set something else (not body) to scroll container, you could:

    <div class="container" v-scroll-spy>
        <div>
            <h1>Header 1</h1>
            <p>Content</p>
        </div>
        <div>
            <h1>Header 2</h1>
            <p>Content</p>
        </div>
    </div>
    .container {
      position: relative;
    }

    Develop

    npm i && npm run watch 
    cd docs-src && npm i && npm run dev

    License

    MIT

    Thanks to

    ibufu

    Install

    npm i @xlaoyu/vue-scrollspy

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    87.2 kB

    Total Files

    22

    Last publish

    Collaborators

    • xlaoyu