html 使用“锁定”正文覆盖滚动的示例页面

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于html 使用“锁定”正文覆盖滚动的示例页面的主要内容，如果未能解决你的问题，请参考以下文章

我的 Flutter 网页的滚动正文出现问题

页面正文滚动时如何滚动元素？

mCustomScroll - 页面加载上的滚动正文焦点[关闭]

Ipad iOS 滚动不一致：禁用正文滚动但允许在某些元素上滚动

Bootstrap 页脚覆盖正文内容

iOS页面控制滚动锁定