Mobile 100vh fix (ES6 module)

mobilefix.js

/**
 * MobileFix
 *
 * Fix fullheight elements on mobile with that pesky URL bar
 */

/**
 * Threshold of screen height difference at which elements will update their
 * height, so will essentially only update on orientation change.
 * Change to 0 if you want elements to adjust every time URL bar moves
 */
const threshold = 100;

let _selector;
let lastWinHeight = 0;

function windowHeight() {
	const winHeight = window.innerHeight;

	if (Math.abs(lastWinHeight - winHeight) >= threshold) {
		document.querySelectorAll(_selector).forEach(function(el) {
			el.style.height = `${winHeight}px`;
		});
	}

	lastWinHeight = winHeight;
}

export default function mobilefix(selector) {
	// Check if this script is necessary by placing a dummy element at 100vh and
	// checking it's height against the inner height of the window.
	// This works because mobile browsers will use the largest screen height
	// (when URL bar is hidden) as 100vh size
	let check = document.createElement('div');
	check.style.height = '100vh';
	check.style.width = '0';
	document.body.appendChild(check);
	const h = check.offsetHeight;
	document.body.removeChild(check);
	check = null;

	console.log(h, window.innerHeight);

	if (h !== window.innerHeight) {
		console.log('Applying mobilefix height');
		_selector = selector;
		windowHeight();
		window.addEventListener('resize', windowHeight);
	}
}

usage.js

import mobilefix from './mobilefix.js';

mobilefix('.fullheight');