in-view 一个小型 JS 库检测一个 DOM 元素是否在 viewport 区域里

1,382 阅读1分钟
原文链接: github.com

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

camwiegert.github.io/in-view


Either download the latest release and include it in your markup or install with npm:

npm install --save in-view

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;
    });

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

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

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

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);

Check if element is in the viewport.

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

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. integer can be positive or negative.

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

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();

Manually emit event for any single element.

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

License MIT