Given a list of DOM elements, return the one closest to the focal point of the browser viewport
npm install viewport-focus --save
yarn add viewport-focus
Install a document.scrollingElement polyfill for older browser support
<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>
});
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));
});
offset
bounds
- top and bottom are compared to the viewport middle — defaultmiddle
- element height is compared to viewport middle
Pull requests accepted!
ISC LICENSE
Copyright © 2017 Push the Red Button