- Notifications
You must be signed in to change notification settings - Fork0
Check if an element is visible in the viewport using Vanilla JavaScript with Vue 3 support.
License
opuu/inview
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
InView is a lightweight, high-performance JavaScript library for detecting when elements enter or exit the viewport. Perfect for lazy loading, scroll-triggered animations, infinite scrolling, and more.
- Simple API: Intuitive and flexible configuration
- TypeScript Support: Complete type definitions included
- Vue.js Integration: Custom directives for seamless usage
- High Performance: Minimal overhead, efficient observation
- Customizable: Precision, delay, and single/multi-element support
- Modern Browser Support: Built on Intersection Observer API
Install via your preferred package manager:
npm install @opuu/inview# orpnpm install @opuu/inview# oryarn add @opuu/inview
Or use via CDN:
<scripttype="module">importInViewfrom"https://cdn.jsdelivr.net/npm/@opuu/inview/dist/inview.js";</script>
For module bundlers (webpack, rollup, parcel, etc.):
importInViewfrom"@opuu/inview";
For browsers with ES module support:
<scripttype="module">importInViewfrom"node_modules/@opuu/inview/dist/inview.js";</script>
Or use the CDN snippet above.
Create a new InView instance by passing a CSS selector or a configuration object:
constinview=newInView(selectorOrConfig);
selectorOrConfig:string(CSS selector) orInViewConfigobject
Configure observation with the following options:
interfaceInViewConfig{selector:string;delay?:number;precision?:"low"|"medium"|"high";single?:boolean;}
| Property | Type | Default | Description |
|---|---|---|---|
| selector | string | — | CSS selector for elements to observe |
| delay | number | 0 | Delay (ms) before triggering callbacks |
| precision | "low" | "medium" | "high" | "medium" | Intersection precision |
| single | boolean | false | Observe only the first matching element |
Listen for"enter" or"exit" events:
inview.on("enter",(event)=>{// Element entered viewport});inview.on("exit",(event)=>{// Element exited viewport});
event:"enter"or"exit"callback:(event: InViewEvent) => void
Pause observation:
inview.pause();
Resume observation:
inview.resume();
Set callback delay (in ms):
inview.setDelay(200);
The callback for"enter" and"exit" receives anInViewEvent object:
interfaceInViewEvent{percentage:number;rootBounds:DOMRectReadOnly|null;boundingClientRect:DOMRectReadOnly;intersectionRect:DOMRectReadOnly;target:Element;time:number;event:"enter"|"exit";}
| Property | Type | Description |
|---|---|---|
| percentage | number | % of element visible in viewport |
| rootBounds | DOMRectReadOnly | null | Viewport rectangle |
| boundingClientRect | DOMRectReadOnly | Element's rectangle |
| intersectionRect | DOMRectReadOnly | Intersection rectangle |
| target | Element | Observed element |
| time | number | Event timestamp |
| event | "enter" | "exit" | Event type |
constelements=newInView(".css-selector");elements.on("enter",(event)=>{// Element entered viewport});elements.on("exit",(event)=>{// Element exited viewport});
constelement=newInView({selector:".css-selector",delay:100,// ms delay before callbackprecision:"high",// "low" | "medium" | "high"single:true,// Observe only the first match});
importInViewfrom"@opuu/inview";importtype{InViewConfig,InViewEvent}from"@opuu/inview";constconfig:InViewConfig={selector:".css-selector",delay:0,precision:"medium",single:true,};constelement:InView=newInView(config);element.on("enter",(event:InViewEvent)=>{// Handle enter event});
InView provides Vue directives for easy integration.
import{createInViewDirective,createOutViewDirective}from"@opuu/inview/vue";constapp=createApp(App);app.directive("inview",createInViewDirective({delay:100,precision:"high",single:true}));app.directive("outview",createOutViewDirective());
<template><divv-inview="onEnterHandler"v-outview="onExitHandler"><!-- Content --></div></template>
You can also register directives locally within a component.
InView uses theIntersection Observer API, supported by all modern browsers.
See browser compatibility.
MIT License
About
Check if an element is visible in the viewport using Vanilla JavaScript with Vue 3 support.
Topics
Resources
License
Code of conduct
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Uh oh!
There was an error while loading.Please reload this page.