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