vue-check-view - A plugin that checks if element is in viewport. Fast, small, has no dependencies, live demo.

Overview

Check if element is in viewport. Vue.js 2 plugin with SSR support without dependencies. DEMO

Simple plugin that checks element position on the screen (viewport) and adds classes to element:

  1. In viewport classes: view-in and one of [view-in--gt-half, view-in--gt-thrid, view-in--full],
  2. Out viewport classes: view-out and one of [view-out--below, view-out--above]

It listens scroll and resize window events and supports modern browsers (Firefox, Chrome, Edge). Supports vue.js version 2 and higher.

Install

npm i vue vue-check-view --save

import checkView from 'vue-check-view'
Vue.use(checkView)

or (only for test)

<script src="http://vtimofeev.github.io/vue-check-view/plugin.js">

Add directive 'view' to elements

Example 1, simple

Auto add classes to element

<div v-view>
    Content
</div>

Example 2, advanced with use handler

Auto add classes to element and executeHandler

<div v-view="viewHandler">
    Content
</div>
funtion viewHandler (e) {
    console.log(e.type) // 'enter', 'exit', 'progress'
    console.log(e.percentInView) // 0..1 how much element overlap the viewport
    console.log(e.percentTop) // 0..1 position of element at viewport 0 - above , 1 - below
    console.log(e.percentCenter) // 0..1 position the center of element at viewport 0 - center at viewport top, 1 - center at viewport bottom
    console.log(e.scrollPercent) // 0..1 current scroll position of page
    console.log(e.scrollValue) // 0..1 last scroll value (change of page scroll offset)
    console.log(e.target.rect) // element.getBoundingClientRect() result
}

Example 3, once time the handler will be executed when element appears on screen

<div v-view.once="onceHandler">
    Content
</div>
funtion onceHandler (e) {
    console.log(e.type) // 'enter', 'exit', 'progress'
    console.log(e.percentInView) // 0..1 how much element overlap the viewport
    console.log(e.percentTop) // 0..1 position of element at viewport 0 - above , 1 - below
    console.log(e.percentCenter) // 0..1 position the center of element at viewport 0 - center at viewport top, 1 - center at viewport bottom
    console.log(e.scrollPercent) // 0..1 current scroll position of page
    console.log(e.scrollValue) // 0..1 last scroll value (change of page scroll offset)
    console.log(e.target.rect) // element.getBoundingClientRect() result
}

DEMO

Browser

https://vtimofeev.github.io/vue-check-view/index.html

Live image

demo

Comments
  • viewHandler params

    viewHandler params

    Hi.. is it possible to add the functionality to pass extra params into viewHandler alongside with the event? eg v-view="viewHandler($event,message)"

    opened by thanosalexander 2
  • Removed ES6 features to be fully ES5 compatible resolves #2

    Removed ES6 features to be fully ES5 compatible resolves #2

    The package is written in mostly ES5 code, with a handful of ES6 features thrown in. The package is not transpiled to ES5, therefore throwing errors in IE11 and older browsers that do not support ES6.

    This pull request removes the ES6 features used: This package contains the following ES6 features:

    1. Object.assign
    2. const and let
    3. Default function arguments
    4. Arrow functions
    5. Array destructuring
    6. Object property shorthand

    This change will allow users of this package to not have to transpile the package themselves and allow it to work in IE11 and older browsers.

    opened by coreycoburn 1
  • this is brilliant! but can use from mounted() hook?

    this is brilliant! but can use from mounted() hook?

    It would be great if it were possible to check e.percentInView on page load – I need to apply a class if e.percentInView > 0.98 on page load as the view-in--full is not always accurate initially.

    opened by simonhrogers 1
  • vue-check-view does not trigger if height of div is 0

    vue-check-view does not trigger if height of div is 0

    Version:

    "vue-check-view": "^0.3.0"
    

    Steps to reproduce:

    1. Render the code below in your component:
    <template>
      <div v-view.once="onceHandler" class="wrapper">
        <div v-if="data" class="content">
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'test-component',
        data() {
          return {
            data: undefined,
          }
        },
        methods: {
          onceHandler() {
            console.log('onceHandler')
          },
        },
      }
    </script>
    

    :x: Actual result: vue-check-view does not trigger: classes in the dom are not updated and onceHandler is not called.

    :white_check_mark: Expected result: vue-check-view is triggering.


    if I try this workaround:

    <style lang="scss">
      .wrapper {
          min-height: 1px;
      }
    </style>
    

    it starts working. But IMO it should work without this workaround even when the target div height is 0.

    opened by igorbuts 0
  • Typescript : Uncaught TypeError: Cannot read property '$isServer' of undefined

    Typescript : Uncaught TypeError: Cannot read property '$isServer' of undefined

    I success declare the js plugin with *.d.ts, but after I do .use(checkView), my view is blank, did this library support on Typescript?

    main.ts file

    import checkView from 'vue-check-view' .... createApp(App).use(store).use(router).use(checkView).component('font-awesome-icon', FontAwesomeIcon).mount('#app')

    *.d.ts file

    declare module "vue-check-view"; any;

    opened by younixue3 3
  • Starting animations

    Starting animations

    Hi, thanks for the great script, I was trying to use it to start animations like translateX, but could please help me out, what is the best way to animate and keep it active until is out of the viewport, I tried the .view-in but it turns to view-out sometimes

    https://codepen.io/nam_co/pen/gOpRwbP

    Appreciate the help

    opened by nam-co 0
  • Function only called once at beginning of created page

    Function only called once at beginning of created page

    i have a component like this

    <div class="background-footer" style="z-index: 1" v-view="handleScroll">
     <!-- content -->
    </div>
    

    and my script function only do console.log().

    Why is it only trigger once instead of every time i scroll down the screen ? Not like how it works in demo, every time i scroll down, the component updating its view property

    opened by KevinShianto 7
  • When e.target is bigger than viewport...

    When e.target is bigger than viewport...

    So I have an element target which is bigger than viewport size, and viewHandler(e) fires exit from element before it actually leaves the viewport here is the printscreen of console.log image

    I think this is because element is bigger and then something trippy happens to percent in view image

    Its not a big issue but I think its worth fixing and making this plugin SUPERAWESOME! Anyway thanks for even making this, it really saved me the time

    opened by panksi 3
Owner
Vasily Timofeev
Vasily Timofeev
A Vue.js component for detecting when components are visible in the viewport via the Vue.js scoped slots api.

vue-scrollview ScrollView is a Vue.js plugin that includes a set of components and methods for facilitating UI interactions tied to scrolling in your

Chris Hurlburt 115 Jun 28, 2022
(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

??️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

null 655 Sep 22, 2022
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

Mihir Kumar 5 May 14, 2022
👁 Declarative Vue component that emits an event when scrolled into view

vue-visibility-trigger Vue component that emits an event when scrolled into view Installation Install the package from npm by running $ yarn add vue-v

William Lindvall 5 May 30, 2021
A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold or past the threshold

A vue directive that accepts a threshold value and a callback function that tells you if current scroll position is before the binded element, after element and inside the threshold, or past the threshold

javad mnjd 0 Jun 30, 2022
nuxt-fullpage is a nuxt module for creating fullscreen page scroll fast and simple.

Nuxt fullpage Nuxt module for creating fullscreen page scroll fast and simple. Demo online Table of contents Installation Usage Options Contributing I

Open Source Afghanistan 15 Jun 14, 2022
⚡️ Blazing fast scrolling for any amount of data

vue-virtual-scroller Blazing fast scrolling of any amount of data | Live demo | Video demo For Vue 3 support, see here ??️ Become a Sponsor Sponsors T

Guillaume Chau 7.2k Oct 1, 2022
↕ A simple but fast & powerful library to animate HTML elements while scrolling pages.

Vue Scroll Animator ↕ A simple but fast & powerful library to animate HTML elements while scrolling pages. Installation npm install @byloth/vue-scroll

Matteo Bilotta 0 May 19, 2022
A Vue plugin which supervises binding element's scrolling and trigger target elements class

A Vue plugin which supervises binding element's scrolling and trigger target elements class

null 0 Nov 27, 2020
A Vue.JS plugin directive to remember element scroll-position when detached

A Vue.JS plugin directive to remember element scroll-position when detached Problem If a DOM fragment is removed from the DOM and t

Mark Hahn 50 Jun 25, 2021
A Vue plugin which supervises binding element's scrolling and trigger target elements class

vue-scroll-trigger A Vue plugin which supervises binding element's scrolling and trigger target elements class Sample BEHIVE-DESIGN Install with yarn

Ranlizzz 2 Nov 5, 2020
A Vue component to add intersection-observer to a Vue component or HTML element.

Vue Intersect A Vue component to add intersection-observer to a Vue component or HTML element. Table of content Introduction Demo Installation Usage P

WEAREHEAVY® 322 Aug 26, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 182 Oct 1, 2022
A vue directive to make a scrollable element scroll by draging to the scroll direction

vue-dragscroll vue-dragscroll is a micro vue.js directive which enables scrolling via holding the mouse button ("drag and drop" or "click and hold" st

null 223 Sep 9, 2022
A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Pete Hegman 181 Aug 30, 2022
A simple web component (Vue.js >= 3.2) that provides infinite scrolling to display a large array of data one element at a time

infinite-scroller-comp infinite-scroller-comp is a Vue.js (>=3.2) web component that provides a content area and an associated vertical scroll bar. Th

null 0 May 10, 2022
Vue Scroll Show - Showing the element if the user reached it after scroll

Vue Scroll Show Showing the element if the user reached it after scroll Installation npm i --save-dev vue-scroll-show import VueScrollShow from 'vue-s

Aleksey Pleshkov 10 Jan 5, 2022
A Vue directive to lock the body scroll without stopping the target element from scrolling

A Vue directive to lock the body from scrolling without stopping the target element from scrolling

Bram Honingh 30 Jul 10, 2022
A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Carlos González 20 Sep 27, 2021