Question

我正试图阻止文本在下拉移动菜单后面滚动。我曾考虑过使用一个从顶部开始的简单偏移量来实现这一点，但是菜单是动态的并且会移动到不同的大小，因此不可能

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
#menu
    {
    height:200px;
    width:100%;
    background-color:#E03437;
    position:relative;
    }
#main{
    height:800px;
    width:100%;
    overflow:scroll;
    }   
</style>
</head>

<body>
<div id="menu">MOBILE MENU DROP DOWN</div>
<div id="main">
  <p>This a test  text I dont want to be able to scroll behind the red mobile menu div above.</p>
  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>a</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>a</p>
  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
</div>

</body>
</html>

Answer 1

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
html, body {
    height: 100%;
}
.flex-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    height: 100%;
}
#menu{
    width:100%;
    background-color:#E03437;
    position:relative;
    padding: 15px;
}
#main{
    width:100%;
    overflow:scroll;
}   
</style>
</head>

<body>
<div class="flex-container">
<div id="menu">MOBILE MENU DROP DOWN</div>
<div id="main">
  <p>This a test  text I dont want to be able to scroll behind the red mobile menu div above.</p>
  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>a</p>
  <p>a</p>  <p>a</p>  <p>a</p>  <p>a</p>
  <p>a</p>  <p>a</p>  <p>&nbsp;</p>
</div>
</div>
</body>

停止移动菜单后面的文字滚动

1 个答案: