vue-intersect-directive
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.1 • Public • Published

    Vue Intersect Directive

    VueJS directive to observe intersection of an element with viewport.

    Installation

    ⚠️ This plugin uses the Intersection Observer API that is not supported in some legacy browsers. Please include a polyfill to work them around.

    Via npm:

    npm install vue-intersect-directive

    Via yarn:

    yarn add vue-intersect-directive

    Import

    import Vue from 'vue'
    import VueIntersect from 'vue-intersect-directive'
    
    Vue.use(VueIntersect)

    Or:

    import Vue from 'vue'
    import { IntersectDirective }  from 'vue-intersect-directive'
    
    Vue.directive('intersect', IntersectDirective)

    Browser

    <script src="vue.js"></script>
    <script src="vue-intersect-directive/dist/vue-intersect-directive.min.js"></script>

    Usage

    CSS Binding

    Attach foo class to an element only when it is inside the viewport.

    <div v-intersect="{ true: ['foo'] }">Hello</div>

    Attach bar and baz classes to an elment only when it is outside the viewport.

    <div v-intersect="{ false: ['bar', 'baz'] }">Hello</div>

    CSS can be specified as object format.

    <div v-intersect="{ true: { backgroundColor: 'green' } }">Hello</div>

    Intersection Callback

    You can register onChange callback funciton that will be called when intersection status changes. For the details of the options argument, refer to "Directive Hook Arguments".

    <div id="app">
      <p v-intersect="{ onChange: handleIntersection }">Hello</p>
    </div>
    <script>
      new Vue({
        methods: {
          handleIntersection(isIntersecting, el, options) {
            console.log(isIntersecting) // true or false
            console.log(el)             // reference to the elment (<p> element in this case)
            console.log(options)        // value of v-intersect 
          }
        }
      }).$mount('#app')
    </script>

    Stop observing

    Use disposeWhen property to stop observing intersection of the element. For instance, if you set the value of the property to true, the element will no longer be observed once it comes inside the viewport.

    <div id="app">
      // when this element comes inside the viewport, `foo` class is attached.
      // The attached class will not be removed even when the element goes outside the viewport.
      <p v-intersect="{ true: [ 'foo' ], disposeWhen: true }">Hello</p>
    </div>

    Configuration for the Intersection Observer (optional)

    You can set the Intersection Observer options with v-intersect value. Refer to "Creating an intersection observer" for more details.

    For instance, if you set the threshold value of observerOptions to 1, the element will not be recognized as intersected unless its whole area is inside the viewport. Please check the demo page to see what it really means.

    <div v-intersect="{ 
      observerOptions: {
        root: document.querySelector('#my-viewport'),
        rootMargin: '10px',
        threshold: 1.0,
      },
      true: [ 'foo' ],
      false: [ 'bar' ],
      onChange: (isIntersecting, el, options) => {
        // handle intersection
      },
    }">Hello</div>

    Example

    Demo
    Source: dist/index.html

    To Do

    • Add test.

    License

    MIT

    Install

    npm i vue-intersect-directive

    DownloadsWeekly Downloads

    707

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    28.1 kB

    Total Files

    8

    Last publish

    Collaborators

    • megurock