Check if an element is in viewport. (580 bytes and IE9+)
MIT License
Comparing to in-viewport and in-view, element-in-view
only exports a function for checking if an element is in viewport, handling events and other stuffs are left to user-land. In fact, this library is extracted from in-view, I tried to use that library in vue-mugen-scroll, but I need to use a custom logic to handle events, so many features in in-view
become useless, that's why this library exists.
yarn add element-in-view
import inView from 'element-in-view'
window.addEventListener('scroll', () => {
inView(element)
//=> true or false
})
Note that the API doc is partially extracted from in-view.
A DOM Element.
Type: Number
object
Default: 0
By default, element-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.
Offset can also be set per-direction by passing an object.
{
top: 100,
right: 75,
bottom: 50,
left: 25
}
Type: Number
Default: 0
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
.
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
element-in-view © egoist, Released under the MIT License. Authored and maintained by egoist with help from contributors (list).
egoistian.com · GitHub @egoist · Twitter @_egoistlily