Skip to content

Instantly share code, notes, and snippets.

@YarGnawh
Created August 25, 2016 07:47
Show Gist options
  • Save YarGnawh/90e0647f21b5fa78d2f678909673507f to your computer and use it in GitHub Desktop.
Save YarGnawh/90e0647f21b5fa78d2f678909673507f to your computer and use it in GitHub Desktop.
Sample page of overlay scrolling with "locked" body
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment