v-intersect

    0.1.3 • Public • Published

    V-Intersect

    version

    Detect when element is visible or hidden on user viewport

    Demo

    Demo

    Installation

    NPM

    npm install v-intersect --save

    Yarn

    yarn add v-intersect

    Install the plugin into your Vue project:

    import Vue from 'vue'
    import VIntersect from 'v-intersect'
     
    Vue.use(VIntersect)

    or use the component and directive directly:

    import Vue from 'vue'
    import { VIntersectComp, VIntersectDir } from 'v-intersect'
     
    Vue.directive('intersect', VIntersectDir)
    Vue.component('v-intersect', VIntersectComp)

    Usage

    Directive

    <div class="content" v-intersect="onIntersect">...</div>

    The function will be called when the visibility of the element is changes.

    onIntersect(observer){
        this.isVisible = observer.isIntersecting
        console.log(observer.entries)
    }
    • isIntersecting: when it's true it means the element is visible on the screen, and false means it's hidden
    • entries: IntersectionObserverEntry

    And if you want the function only called when element is visible you can use .enter modifier.

    <div class="content" v-intersect.enter="onIntersect">...</div>

    Options

    <div class="content" v-intersect="{
        callback: onIntersect,
        options: {
            root: ...,
            rootMargin: ...,
            threshold: ...
        }
    }">
    </div>

    For more details IntersectionObserver Options

    Once

    It will called the function once when the element is visible

    <div class="content" v-intersect="{
        callback: onIntersect,
        once: true
    }" />

    Disabling the observer

    <div class="content" v-intersect="{
        callback: onIntersect,
        disabled: true
    }" />

    Component

    <v-intersect @change="onIntersect">
        <div class="content">...</div>
    </v-intersect>

    Events

    Name Description
    change event fired when visibility of the element change
    enter event fired when the element is intersect (visible) on the screen
    once event fired once when the elemnt is visible

    Props

    Name Type Default Description
    root String ' ' MDN
    rootMargin String '0px' MDN
    threshold [Array, Number] 0 MDN
    disabled Boolean false Disable the observer

    Note: for root prop, you need to pass the element class or id i.e .content or #content

    Polyfill

    This plugin uses The IntersectionObserver API, and currently it is not available in all browsers (IE11, Safari and iOS Safari). If you intend to support these browsers, you can include WICG IntersectionObserver Polyfill to your bundle.

    Keywords

    Install

    npm i v-intersect

    DownloadsWeekly Downloads

    184

    Version

    0.1.3

    License

    MIT

    Unpacked Size

    659 kB

    Total Files

    39

    Last publish

    Collaborators

    • kholid060