jquery - 全屏移动菜单和滚动限制其内容

问题描述

早上好，

我制作了一个移动菜单，通过单击主页上的按钮激活该菜单。

这一页占据了整个页面。另一方面，我必须限制滚动，以免看到整个页面。我需要能够滚动菜单的内容，所以固定位置没有帮助。如何将视口强制为 my 的div内容display: block？

我尝试的第一个解决方案是Here。

但我不希望菜单无限滚动，只在其内容上

我试过的第二个是这里。

提前谢谢你，我尝试了各种解决方案，但还没有任何效果。

标签： jqueryhtmlcss

你在正确的轨道上它不是滚动哪个菜单有你的身体元素滚动请看下面的例子，我只是做一些边框来清除你

如果您看到内部滚动条是菜单滚动条，而外部滚动条是您的主体滚动条，因为菜单位于主体内部，所以它是可见的

$("button").click(function(){
    $("body").toggleClass("over");
    $(".menu").addClass("active");
  });

body {
    height: 100%;
    background-color: red;
    overflow: auto;
}
.over{
 overflow: hidden;
}
.menu {
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    /* width: auto; */
    /* height: 100%; */
    margin: 0;
    padding: 0;
    background-color: white;
    z-index: 1;
    border: 1px solid;
    right: 0;
    bottom: 0;
    padding: 10px;
    overflow-y: scroll;
    
display:none;
}
.menu.active{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<button>Toggle menu</button>
<div class="menu">
  Menu

</div>
</body>

jquery - 全屏移动菜单和滚动限制其内容

问题描述

解决方案

推荐阅读