Viewport-focus NPM

viewport-focus

Given a list of DOM elements, return the one closest to the focal point of the browser viewport

Install

npm install viewport-focus --save
yarn add viewport-focus

Install a document.scrollingElement polyfill for older browser support

Usage

<script src="//unpkg.com/underscore@1.8.3/underscore.js"></script>
<script src="//unpkg.com/viewport-focus/dist/viewport-focus.js"></script>
<script>
  var getViewportFocus = window.viewportFocus;
  var elements = document.querySelectorAll('section');
  // jQuery: var elements = $('section')[0];

  function setClosestEl() {
    var closestEl = getViewportFocus(elements);
    // closestEl is at your command
  }

  setClosestEl();
  window.addEventListener('scroll', _.throttle(setClosestEl, 100));
</script>
});

In the Future

import throttle from 'lodash/throttle';
import getViewportFocus from 'viewport-focus';

document.addEventListener('DOMContentLoaded', () => {
  const elements = document.querySelectorAll('section');

  function setClosestEl() {
    const closestEl = getViewportFocus(elements);
    // closestEl is at your command
  }

  setClosestEl();
  window.addEventListener('scroll', throttle(setClosestEl, 100));
});