A plugin that checks if element is in viewport

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
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
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.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 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
trigger functions and events based on the element position on the screen

VueWaypoint trigger functions and events based on the element position on the screen Demo Simple demo page Open your browser console and see what's go

Marco 'Gatto' Boffo 447 Sep 30, 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
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Aug 29, 2022
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.2k Sep 28, 2022
A simple scroll picker plugin for Vue 3

vue3-scroll-picker Vue 3 scroll picker plugin. Demo Demo Demo Code Install yarn add vue3-scroll-picker npm i --save vue3-scroll-picker Register Global

HJ 16 Sep 16, 2022
Vue.js plugin for page scroll progress bar

vue-scroll-progress-bar Getting started Install $ npm install @guillaumebriday/vue-scroll-progress-bar --save or $ yarn add @guillaumebriday/vue-scrol

Guillaume Briday 84 Aug 29, 2022
A customizable scrollbar plugin based on vue.js for PC , mobile phone, touch screen, laptop.

Vuescroll Introduction Vuescroll is a scrollbar plugin based on Vue.js 2.X, it is very easy to use, no complex options and each option has its default

null 1.2k Sep 28, 2022