README
dom-in-view
Select DOMElement(s) that is currently inside or visible in current viewport.
install
npm i dom-in-view
DOMInView Instance
// import it
import DOMInView from 'dom-in-view';
// instance
new DOMInView(HTMLElement || NodeList || Array<HTMLElement> : elements, Object : callbacks, Object : options);
accessors
- elements:Array - Returns an array of all the elements provided.
- options:Object - Current defined options object.
- matches:Array - Reference to matches at the point in time of it being called.
- pull():Array - Returns an array of all the matches from the pull. (note: does not point to the matches array)
arguments
- elements - Elements requires a single valid HTMLElement, NodeList or an Array.
new DOMInView(document.querySelector('p#single-paragraph'), Object : callbacks, Object : options);
new DOMInView(document.querySelectorAll('p, div, h1, h2'), Object : callbacks, Object : options);
new DOMInView([document.querySelector('p#single-paragraph'), document.querySelector('div#single-div')], Object : callbacks, Object : options);
- callbacks - There are 3 available callbacks
- init - Will be called on initialization. A helper implementation function to run when the class is instantiated.
- on - Gets called on each element visible or inside(depending on options) the viewport
- off - Gets called on each element when it's NOT visible or inside the viewport
{ init: function(DOMInView : self){}, on: function(HTMLElement : element, String : className){}, off: function(HTMLElement : element, String : className){} }
- options - Available options. Defaults in bold
- check - String : 'visible' || 'inside'
- className - String : 'dom-in-view'
- autostart - Boolean : true
- scroll - Boolean : true
- resize - Boolean : true
- animationFrame - Boolean : false. If animationFrame is set to true autostart, scroll and resize will be ignored since it will use the requestAnimationFrame and pull on every frame.
- ignoreDefaultEvents - Boolean : false. If ignoreDefaultEvents is set to true autostart, scroll, resize and animationFrame will be ignored, useful for when you want to pull on your own eventlisteners
// default options const options = { check: 'visible', className: 'dom-in-view', autostart: true, scroll: true, resize: true, animationFrame: false, ignoreDefaultEvents: false, }
Examples
Add class to elements that has been visible in view
// default options will be applied
new DOMInView(document.querySelectorAll('p'), {
on: function(element){
element.classList.add('element-visible');
}
});
Pulling after your own events
// default options will be applied
new DOMInView(document.querySelectorAll('p'), {
init: function(){
// check all elements being listened to manually in a window click event
window.addEventListener('click', _ => this.pull());
},
on: function(element){
element.classList.add('element-visible');
}
// override ignoreDefaultEvents
}, {ignoreDefaultEvents: true});
If you prefer not to use the init callback you may access instance accessors like you'd normally do.
const dv = new DOMInView(document.querySelectorAll('p'), {
on: function(element){
element.classList.add('element-visible');
}
}, {ignoreDefaultEvents: true});
// check all elements being listened to manually in a window click event
window.addEventListener('click', _ => dv.pull());
Extended example
Note that anonymouse functions don't have this
context so if you need to access the instance inside a callback, use a normal function(){}
instead.
const options = {
check: 'inside',
ignoreDefaultEvents: true,
}
new DOMInView(document.querySelectorAll('p'), {
init: (self) => {
setInterval(() => {
self.pull();
}, 3000);
},
on: (element) =>{
element.classList.add('element-visible');
},
off: (element) => {
element.classList.remove('element-visible');
}
}, options);