jon
8/25/2016 - 7:47 AM

Sample page of overlay scrolling with "locked" body

Sample page of overlay scrolling with "locked" body

sample.html
content_copyfile_download
<!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>