A plugin that checks if element is in viewport

Related tags

vue-check-view
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

Issues
  • Not transpilable code

    Not transpilable code

    This module gives problems with IE11 due to its use of ES6 features. It should be made retro-compatible with older ES versions.

    opened by belvederef 5
  • 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
  • No issues found but...

    No issues found but...

    ...just wanted to thank you, @vtimofeev. This works really nicely and smoothly.

    opened by pire 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
  • 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
  • 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 1
  • 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 6
  • 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
  • added passive listeners

    added passive listeners

    added passive listeners for better google lighthouse results

    opened by deepsoul 0
  • Horizontal scroll?

    Horizontal scroll?

    Would be Great if it can detect also horizontal scroll 😅

    opened by sergioIGZ 0
  • Option to not add classes on the element

    Option to not add classes on the element

    It will be nice if we have an option to disable the append of classes to the element.

    opened by waghcwb 0
  • scroll-listener on target div instead of page

    scroll-listener on target div instead of page

    Is it possible to set the scroll event on an overflowing div instead of the page/document?

    opened by StefKors 2
Owner
Vasily Timofeev
Vasily Timofeev
Handy floating scrollbar component for Vue 3

vue-handy-scroll Handy floating scrollbar component for Vue 3. Synopsis vue-handy-scroll is a component that solves the problem of scrolling lengthy c

null 6 Oct 2, 2021
A scroll loading component for vue.js.

vue-scroll-loader 简体中文 A scroll loading component for vue.js. View demo Browsers Already use IntersectionObserver polyfill compatible with mainstream

John Wu 57 Sep 30, 2021
⚡️ 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 6.1k Oct 13, 2021
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® 306 Sep 30, 2021
Adds a directive that listens for click events and scrolls to elements.

vue-scrollto DEMO Scrolling to elements was never this easy! This is for vue 2.x and vue 3.x (since v2.19.0) For vue 1.x use [email protected] (note

Igor Randjelovic 1.8k Oct 13, 2021
scrollspy

vue-scrollwatch scrollwatch features: auto detect element enter viewport when scroll expose api: scrollTo , to scroll element to enter viewport you ca

null 53 Aug 7, 2021
Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

Honoré Nintunze 52 Aug 12, 2021
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 393 Sep 28, 2021
Wrapper to use the awesome scrollMonitor with [email protected]

VueScrollmonitor Handle scroll events like a boss Wrapper to use the awesome scrollMonitor with [email protected] To know more : https://github.com/stutrek/sc

Alexandre Bonaventure Geissmann 44 May 7, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021
Vue component to easily setup scroll-driven interactions (aka scrollytelling)

Vue Scrollama A Vue component to easily setup scroll-driven interactions (aka scrollytelling). Uses Scrollama under the hood. The best way to understa

Vignesh Shenoy 351 Oct 13, 2021
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 113 Jul 20, 2021
Lightweight and simple to use vue component that highlights menu items as you scroll the page, also scrolling to target section when clicked.

vue-scrollactive This component makes it simple to highlight a menu item with an 'active' class as you scroll. Highlights items with a class as you sc

Mauricio Farias Dziedzinski 494 Oct 12, 2021
Adds a directive that listens for click events and scrolls to elements.

vue-scroll-to Vue.js directive that listens for click events and scrolls to elements. Install With npm do: $ npm install vue-scroll-to --save or $ yar

Kevin Houghton 16 Oct 19, 2020
A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

A reusable component for Vue 3 that renders a list with a huge number of items (e.g. 1000+ items) as a grid in a performant way.

Roc Wong 37 Oct 10, 2021
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 169 Oct 14, 2021
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 167 Oct 12, 2021
Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Marco 'Gatto' Boffo 25 Aug 16, 2021
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

abelTO 149 Sep 13, 2021