移动端导航展开后页面无法拖动,如何解决?
在移动端禁止屏幕拖动
要解决移动端导航展开时后面区域不可拖动的问题,可以采取以下方法:
<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"> @@##@@ </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> </section> <style> body { overflow: hidden; } </style>
在
标签中添加 overflow: hidden; 样式,即可禁止整个页面的滚动拖动。以上就是移动端导航展开后页面无法拖动,如何解决?的详细内容,更多请关注www.sxiaw.com其它相关文章!