css 禁止手机端屏幕拖动?

Question

当前页面手机端效果

需要当导航展开时, 导航后面的div是不可拖动的状态

当前代码

<header id="header">
    <div class="rxc-wrap el-page-container">
        <nav class="navbar navbar-expand-lg navbar-light fixed-top transition-time-500 font-weight-normal py-3">
            <div class="container">
                <a class="navbar-brand" href="http://localhost:8002">
                    <img src="http://localhost:8002/assets/images/logo.png" class="el-image">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mdb-navbar-collapse">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="mdb-navbar-collapse">
                    <ul class="navbar-nav ml-auto py-4 py-lg-0"><!-- ... --></ul>
                </div>
            </div>
        </nav>
    </div>
</header>


<section id="demoProfile" class="rxc-wrap">
    <div class="container py-5">
        <h1>演示页面</h1>
        <div class="vh-100"></div>
    </div>z
</section>

类似这个网站 https://getbootstrap.com/docs/5.3/components/modal/

点击弹窗时, 外面不可拖动, 但是不知道里面时怎么实现的

Answer 1

body{overflow:hidden}