YarGnawh/sample.html

## sample.html
<!DOCTYPE html>
<html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
    .noscroll {
        overflow: hidden;
    }

    .content {
        background: linear-gradient(red, green);
        height: 600vh;
        overflow: hidden;
    }

    .overlay-wrapper {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .overlay-wrapper .shim {
        width: 1px;
        height: 101vh;
    }

    .overlay-wrapper .overlay-content {
        position: absolute;
        top: 100px;
        left: 40px;
        right: 40px;
        bottom: 80px;
        text-align: center;
        background-color: rgba(255, 255, 255, 0.75);
    }
    </style>
</head>

<body class="">
    <div class="content"></div>
    <div class="overlay-wrapper">
        <div class="overlay-content">
            <h2>Menu Item</h2>
            <h2>Menu Item</h2>
            <h2>Menu Item</h2>
            <h2>Menu Item</h2>
            <button onclick="closeMenu();">Close Menu</button>
        </div>
    </div>
    <script>
    var content = document.getElementsByClassName('content')[0];

    for (var i = 0; i < 9000; i++) {

        var node = document.createElement('h1');
        node.innerHTML = i + ' LOREM IPSUM';
        content.appendChild(node)

        if (!(i % 10)) {
            var btn = document.createElement('button');
            btn.innerHTML = 'OPEN MENU';
            btn.onclick = openMenu;
            content.appendChild(btn)
        }
    }

    function openMenu() {
        document.body.className += ' noscroll';

        var overlay = document.getElementsByClassName('overlay-wrapper')[0];

        var shim = document.createElement('div');
        shim.setAttribute('class', 'shim');

        overlay.appendChild(shim);
        overlay.setAttribute('style', 'display: block;');
    }

    function closeMenu() {
        console.log('hi');
        document.body.className = document.body.className.replace(' noscroll', '');

        var overlay = document.getElementsByClassName('overlay-wrapper')[0];
        overlay.setAttribute('style', '');

        var shim = document.getElementsByClassName('shim')[0];
        shim.parentNode.removeChild(shim);
    }
    </script>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<style>
	.noscroll {
	overflow: hidden;
	}

	.content {
	background: linear-gradient(red, green);
	height: 600vh;
	overflow: hidden;
	}

	.overlay-wrapper {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	}

	.overlay-wrapper .shim {
	width: 1px;
	height: 101vh;
	}

	.overlay-wrapper .overlay-content {
	position: absolute;
	top: 100px;
	left: 40px;
	right: 40px;
	bottom: 80px;
	text-align: center;
	background-color: rgba(255, 255, 255, 0.75);
	}
	</style>
	</head>

	<body class="">
	<div class="content"></div>
	<div class="overlay-wrapper">
	<div class="overlay-content">
	<h2>Menu Item</h2>
	<h2>Menu Item</h2>
	<h2>Menu Item</h2>
	<h2>Menu Item</h2>
	<button onclick="closeMenu();">Close Menu</button>
	</div>
	</div>
	<script>
	var content = document.getElementsByClassName('content')[0];

	for (var i = 0; i < 9000; i++) {

	var node = document.createElement('h1');
	node.innerHTML = i + ' LOREM IPSUM';
	content.appendChild(node)

	if (!(i % 10)) {
	var btn = document.createElement('button');
	btn.innerHTML = 'OPEN MENU';
	btn.onclick = openMenu;
	content.appendChild(btn)
	}
	}

	function openMenu() {
	document.body.className += ' noscroll';

	var overlay = document.getElementsByClassName('overlay-wrapper')[0];

	var shim = document.createElement('div');
	shim.setAttribute('class', 'shim');

	overlay.appendChild(shim);
	overlay.setAttribute('style', 'display: block;');
	}

	function closeMenu() {
	console.log('hi');
	document.body.className = document.body.className.replace(' noscroll', '');

	var overlay = document.getElementsByClassName('overlay-wrapper')[0];
	overlay.setAttribute('style', '');

	var shim = document.getElementsByClassName('shim')[0];
	shim.parentNode.removeChild(shim);
	}
	</script>
	</body>

	</html>