npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

kudago-in-view

v2.0.2

Published

Get notified when a DOM element enters or exits the viewport.

Downloads

90

Readme

in-view.js :eyes:

Get notified when a DOM element enters or exits the viewport. A small (~1.9kb gzipped), dependency-free, javascript utility for IE9+.

Based on camwiegert.github.io/in-view

Build Status npm/in-view

in-view.js


Installation

You can install it with npm:

npm install --save kudago-in-view

Basic Usage

With in-view, you can register handlers that are called when an element enters or exits the viewport. Each handler receives one element, the one entering or exiting the viewport, as its only argument.

inView('.someSelector')
    .on('enter', doSomething)
    .on('exit', el => {
        el.style.opacity = 0.5;
    });

API

in-view maintains a separate handler registry for each set of elements captured with inView(<selector>). Each registry exposes the same four methods. in-view also exposes four top-level methods. (is, offset, threshold, test).

inView(<selector>).on(<event>, <handler>)

Register a handler to the elements selected by selector for event. The only events in-view emits are 'enter' and 'exit'.

inView('.someSelector').on('enter', doSomething);

inView(<selector>).once(<event>, <handler>)

Register a handler to the elements selected by selector for event. Handlers registered with once will only be called once.

inView('.someSelector').once('enter', doSomething);

inView(<selector>).off(<event>, <handler>)

Unregister a handler to the elements selected by selector for event. Handler is a function instance.

inView('.someSelector').off('enter', doSomething);

inView.is(<element>)

Check if element is in the viewport.

inView.is(document.querySelector('.someSelector'));
// => true

inView.offset(<offset>)

By default, in-view considers something in viewport if it breaks any edge of the viewport. This can be used to set an offset from that edge. For example, an offset of 100 will consider elements in viewport if they break any edge of the viewport by at least 100 pixels. offset can be a positive or negative integer.

inView.offset(100);
inView.offset(-50);

Offset can also be set per-direction by passing an object.

inView.offset({
    top: 100,
    right: 75,
    bottom: 50,
    left: 25
});

inView.threshold(<threshold>)

Set the ratio of an element's height and width that needs to be visible for it to be considered in viewport. This defaults to 0, meaning any amount. A threshold of 0.5 or 1 will require that half or all, respectively, of an element's height and width need to be visible. threshold must be a number between 0 and 1.

inView.threshold(0);
inView.threshold(0.5);
inView.threshold(1);

inView.test(<test>)

Override in-view's default visibility criteria with a custom function. This function will receive the element and the options object as its only two arguments. Return true when an element should be considered visible and false otherwise.

inView.test((el, options) => {
    // ...
});

inView(<selector>).check()

Manually check the status of the elements selected by selector. By default, all registries are checked on window's scroll, resize, and load events.

inView('.someSelector').check();

inView(<selector>).emit(<event>, <element>)

Manually emit event for any single element.

inView('.someSelector').emit('exit', document.querySelectorAll('.someSelector')[0]);

Browser Support

in-view supports all modern browsers and IE9+.

As a small caveat, in-view utilizes MutationObserver to check the visibility of registered elements after a DOM mutation. If that's functionality you need in IE9-10, consider using a polyfill.


Performance

Any library that watches scroll events runs the risk of degrading page performance. To mitigate this, currently, in-view only registers a single, throttled (maximum once every 100ms) event listener on each of window's load, resize, and scroll events and uses those to run a check on each registry.

Utilizing IntersectionObserver

There's an emerging browser API, IntersectionObserver, that aims to provide developers with a performant way to check the visibility of DOM elements. Going forward, in-view will aim to delegate to IntersectionObserver when it's supported, falling back to polling only when necessary.


License MIT