egoist / Element In View
Programming Languages
Labels
Projects that are alternatives of or similar to Element In View
element-in-view
Features
- Small and focus, only 580 bytes and exports a single function.
- Supporting all modern browsers and IE9+.
Comparison
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.
Install
yarn add element-in-view
Usage
import inView from 'element-in-view'
window.addEventListener('scroll', () => {
inView(element)
//=> true or false
})
API
Note that the API doc is partially extracted from in-view.
inView(element, [options])
element
A DOM Element.
options
options.offset
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
}
options.threshold
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.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -am 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
Author
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