Waiting for IntersectionObserver to get a better support…

raf_throttler.js

function rafThrottler(callback) {
  let rafId = null;
  const flush = () => {
    callback();
    rafId = null;
  };

  return () => {
    if (rafId) {
      return;
    }

    rafId = requestAnimationFrame(flush);
  };
}

export default rafThrottler;

visibility_observer.js

import rafThrottler from './raf_throttler';

class VisibilityObserver {
  constructor() {
    this.onShow = [];
    this.onHide = [];
    this.viewportHeight = document.documentElement.clientHeight;
    this.check = rafThrottler(this.check.bind(this));
    this.updateCache = rafThrottler(this.updateCache.bind(this));

    if (typeof Set !== 'undefined') {
      this.visible = new Set();
      document.addEventListener('scroll', this.check);
      window.addEventListener('resize', this.updateCache);
    }
  }

  check() {
    if (!this.visible) {
      return;
    }

    const viewportTop = window.scrollY;
    const viewportBottom = viewportTop + this.viewportHeight;

    this.onShow.forEach(item => {
      if (viewportBottom < item.top || viewportTop > item.bottom) {
        this.visible.delete(item);
      } else if (!this.visible.has(item)) {
        this.visible.add(item);
        item.callback();
      }
    });

    this.onHide.forEach(item => {
      if (viewportBottom > item.top && viewportTop < item.bottom) {
        this.visible.add(item);
      } else if (this.visible.has(item)) {
        this.visible.delete(item);
        item.callback();
      }
    });
  }

  updateCache() {
    const currentScrollY = window.scrollY;

    const oldViewPortHeight = this.viewportHeight;
    const newViewportHeight = document.documentElement.clientHeight;
    const viewportDelta = newViewportHeight - oldViewPortHeight;

    this.viewportHeight = newViewportHeight;

    function update(item) {
      const elPosition = item.el.getBoundingClientRect();

      item.top = elPosition.top + currentScrollY - viewportDelta * item.marginTopMultiplier;
      item.bottom = elPosition.bottom + currentScrollY + viewportDelta * item.marginTopMultiplier;
    }

    this.onShow.forEach(update);
    this.onHide.forEach(update);
  }

  on(event, el, callback, {marginTopMultiplier = 0, marginBottomMultiplier = 0} = {}) {
    const currentScrollY = window.scrollY;
    const elPosition = el.getBoundingClientRect();

    const data = {
      el,
      callback,
      top: elPosition.top + currentScrollY - marginTopMultiplier * this.viewportHeight,
      bottom: elPosition.bottom + currentScrollY + marginBottomMultiplier * this.viewportHeight,
      marginTopMultiplier,
      marginBottomMultiplier
    };

    if (event === 'show') {
      this.onShow.push(data);
    } else if (event === 'hide') {
      this.onHide.push(data);
    } else {
      throw new Error(`Unknown event "${event}".`);
    }

    this.check();
  }

  off(event, el, callback) {
    if (event === 'show') {
      this.onShow = this.onShow.filter(data => !(data.el === el && data.callback === callback));
    } else if (event === 'hide') {
      this.onHide = this.onHide.filter(data => !(data.el === el && data.callback === callback));
    } else {
      throw new Error(`Unknown event "${event}".`);
    }
  }
}

const observer = new VisibilityObserver();

export default observer;