Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up

Check if an element is visible in the viewport.

License

NotificationsYou must be signed in to change notification settings

opuu/InView

Repository files navigation

A library to checks if an element is visible in the viewport.

Lazyload any content, animate elements on scroll, infinite scrolling and many more things can be done with this simple, tiny library.

Getting Started

Using InView is easy.

Install

Install it from npm, pnpm or yarn

npm install @opuu/inview
pnpm install @opuu/inview
yarn add @opuu/inview

Import

For module bundlers like webpack, rollup, parcel, etc.

importInViewfrom"@opuu/inview";

For browsers that support ES modules, you can use the script tag withtype="module".

<scripttype="module">importInViewfrom"node_modules/@opuu/inview/dist/inview.js";</script>

Or you can directly import it from CDN.

<script>importInViewfrom"https://cdn.jsdelivr.net/npm/@opuu/inview/dist/inview.js";</script>

Usage

You can use InView in two ways.

Directly selecting the elements

constelements=newInView(".css-selector");elements.on("enter",(event)=>{console.log(event);// do something on enter});elements.on("exit",(event)=>{console.log(event);// do something on exit});

or configuring it for more control.

constelement=newInView({selector:".css-selector",delay:100,precision:"high",single:true,});element.on("enter",(event)=>{console.log(event);// do something on enter});element.on("exit",(event)=>{console.log(event);// do something on exit});

For TypeScript users, you can import the types and use it like this.

importInView,{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)=>{console.log(event);// do something on enter});element.on("exit",(event:InViewEvent)=>{console.log(event);// do something on exit});

Methods

constructor(config: InViewConfig | string): InView

Create a new instance of InView.

constelements=newInView(".css-selector");

or

constelement=newInView({selector:".css-selector",delay:100,precision:"high",single:true,});

The config object is an instance ofInViewConfig interface. Here are the properties of the config object and their default values.

PropertyTypeRequiredDefaultDescription
selectorstringtrueCSS selector for the elements to observe.
delaynumberfalse0Delay in milliseconds for callback.
precision"low" | "medium" | "high"false"medium"Precision of the intersection observer.
singlebooleanfalsefalseWhether to observe only the first element or all the elements.

Here is the interface for the config object.

interfaceInViewConfig{selector:string;delay?:number;precision?:"low"|"medium"|"high";single?:boolean;}

on(event: "enter" | "exit", callback: CallableFunction): InView

Add event listener for enter and exit events.

elements.on("enter",(event)=>{console.log(event);// do something on enter});elements.on("exit",(event)=>{console.log(event);// do something on exit});

The event object is an instance ofInViewEvent interface. Here are the properties of the event object.

PropertyTypeDescription
percentagenumberPercentage of the element visible in the viewport.
rootBoundsDOMRectReadOnly | nullThe rectangle that is used as the intersection observer's viewport.
boundingClientRectDOMRectReadOnlyThe rectangle describing the element's size and position relative to the viewport.
intersectionRectDOMRectReadOnlyThe rectangle describing the intersection between the observed element and the viewport.
targetElementThe observed element.
timenumberThe time at which the event was triggered.
event"enter" | "exit"The event type.

Here is the interface for the event object.

interfaceInViewEvent{percentage:number;rootBounds:DOMRectReadOnly|null;boundingClientRect:DOMRectReadOnly;intersectionRect:DOMRectReadOnly;target:Element;time:number;event:"enter"|"exit";}

pause() : InView

Pause observing.

elements.pause();

resume() : InView

Resume observing.

elements.resume();

setDelay(delay = 0) : InView

Set delay for callback.Default delay is 0 ms.

elements.setDelay(100);

License

MIT License

Author

Obaydur Rahman

References

[8]ページ先頭
©2009-2025 Movatter.jp