Vue.js directive to show (or animate) elements when scrolled

directive.scroll.css

.scroll-show {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}
.scroll-show-enter { opacity: 1; }

directive.scroll.js

const throttle = (callback, interval) => {
	let time = Date.now();
	return () => {
		if (Date.now() - time > interval) {
			callback();
			time = Date.now();
		}
	};
};

export default {
	bind(el, bindings) {
		const {
			target,
			delay = 250,
			interval = 250,
			classname = 'scroll-show',
		} = bindings.value || {};
		const { stagger } = bindings.modifiers;
		const items = target ? [...el.querySelectorAll(target)] : [...el.children];
		items.forEach(item => item.classList.add(classname));
		el.check = () => { /* eslint-disable-line no-param-reassign */
			const { top, bottom } = el.getBoundingClientRect();
			let queueItem = 0;
			items.forEach((item) => {
				const bbox = item.getBoundingClientRect();
				const inContainer = !(bbox.top > bottom || bbox.bottom < top);
				if (inContainer && !item.classList.contains(`${classname}-enter`)) {
					const itemDelay = stagger ? delay * queueItem : 0;
					setTimeout(() => item.classList.add(`${classname}-enter`), itemDelay);
					queueItem += 1;
				}
			});
		};
		el.addEventListener('scroll', throttle(el.check, interval));
	},
	unbind(el) { el.removeEventListener('scroll', el.check); },
	inserted(el) { el.check(); },
};