禁用垂直滚动

Question

在问之前，我已经在同一个主题上看到了这些问题，没有找到解决方案：

我看到的问题

1. Question
2. Question
3. Question

期望的行为

当我单击菜单按钮时，我必须停止垂直滚动（否则，如您在笔中所见，地图内容将超过菜单）

问题

我不明白菜单打开时如何停止垂直滚动。

代码

这是关于菜单的CSS

@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i');

* {
  box-sizing:border-box;
}

html{
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
  font-family: 'Playfair Display', serif;
}

body{
  position:relative;
  height:100%;
  width:100%;
  margin: 0;
  padding: 0;
}
.content {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.circle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 95px;
    border-bottom-right-radius: 100%;
    background-color: #22253C;
}


.title {
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
    font-weight: 400;
    padding: 0 15px;
}

.btn{
  position:absolute;
  top:20px;
  left:20px;
  background-color:transparent;
  border:0;
  padding:0px;
  z-index:1;
  cursor:pointer;
}

.btn__line{
  height:2px;
  width:32px;
  display:block;
  background-color: white;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  position: relative;
}

.btn__line:nth-child(1){
  left:-4px;
}
.btn__line:nth-child(2){
  left:4px;
}
.btn__line:nth-child(3){
  left:-4px;
}


.btn__line + .btn__line{
  margin-top:6px;
}

.btn:hover .btn__line, .btn--open .btn__line{
  left:0px;
}

.btn--open .btn__line{
  background-color:#fff;
}

.nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    visibilty: hidden;
    transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
    opacity: 0;
    display: flex;
    flex-direction: row;
    -webkit-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.nav__item--hover{
  opacity: 0.25;
}

.nav__item{
    position:sticky;
}

.full-menu {
  position: fixed;
  top:0;
    width: 100%;
  height:0;
    display: flex;
    justify-content: center;
    align-items: center;
   transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
}

.full-menu:before, .full-menu:after{
  content: '';
  height: 0;
   position: fixed;
  top:0;
    width: 100%;
    height: 0;
}

.full-menu:before{
  z-index: -10;
  background-color:#B9C6EE;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
} 

.full-menu:after{
   z-index: -1;
  background-color:#22253C;
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) ;
}



.menu--open:before, .menu--open:after{
  height: 100%;
}

.menu--open:before{
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1);
} 

.menu--open:after{
    transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.menu--open{
  height:100%;
  transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -webkit-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: height 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.nav__item {
    padding: 0 20px;
  visibility: hidden;
    transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

.menu--open .nav__item{
  visibility: visible;
}

.menu--open .nav__list{
  visibilty: visible;
  opacity: 1;
  -webkit-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -moz-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -ms-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  -o-transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
  transition: all 0.9s cubic-bezier(0.77, 0, 0.175, 1) 0.3s;
}

.nav__link {
    text-decoration: none;
    color: #fff;
    font-size: 30px;
     letter-spacing: 1px;
}

.nav__item:hover {
    transform: scale(1.1, 1.1);

}
.nav__item:hover .nav__link{
  font-weight:700;
}

.nav__item-not-hover{
  opacity:0.3;
}

@media screen and (max-width:767px){
  .nav__list{
    flex-direction:column;
    text-align:center;
  }
  .nav__item{
    padding:8px 0;
  }

}

@media screen and (max-width:480px){
  .nav__link{
    font-size:26px;
  }
}

下面有html

<html>
  <head>
    <title>Restosearch</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css">
  </head>

  <body>
      <!-- Menu down below -->
    <div class="circle"></div>
    <button class="btn">
      <span class="btn__line"></span>
      <span class="btn__line"></span>
      <span class="btn__line"></span>
    </button>
    <div class="full-menu" style=" overflow-x: hidden">
      <div class="layer"></div>
      <nav class="nav">
        <ul class="nav__list">
          <li class="nav__item">
            <a href="#" class="nav__link">
              Home
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              About
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Portfolio
            </a>
          </li>
          <li class="nav__item">
            <a href="#" class="nav__link">
              Contacts
            </a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- Menu up above -->
    <main>
        <div class="container">
            <div class="box">
                <div>
                    <h2 style="">Search the closest restaurant</h2>
                </div>
            </div> 
        </div>
        <div class="downBox">
                    <input id="pac-input" class="controls" type="text" placeholder="insert here: YourNation, YourCity, YourStreet">
        </div>

        <div class="parent">  
          <div class="left">
              <section class="flex-container">
                  <div class="flex-item">
                      <div id="photo"> </div>   
                      <div id="title"> </div>
                  </div>
                  <div class="flex-item">
                      <div id="photo"> </div>   
                      <div id="title"> </div>
                  </div>
              </section>
          </div>
          <div class="right">
              <div id="map">
              </div>
          </div>
        </div>

    </main>  
  </body>
  <script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
  <script src="script.js"> </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxx&libraries=places&callback=initAutocomplete"
         async defer></script>
</html>

Codepen

codePen Here

Answer 1

您不需要禁用滚动。您可以使用z-index css属性。如果将z-index: 10样式添加到菜单容器div中，并且将ID为地图z-index: 5的div添加到菜单容器中，则会将地图放置在菜单后面。

将其视为3D索引，索引越低，应用于元素的图层越低，索引越高，层次结构中的图层越高。

更多内容：https://www.w3schools.com/cssref/pr_pos_z-index.asp

您也可以仅在打开菜单时使用JS禁用滚动，但是如果您只想解决地图问题，最简单的方法是使用z-index。

Answer 2

您可以设置溢出：当用户单击菜单按钮时隐藏到您的body元素中。它将阻止页面滚动。

Css：

body.disable-scroll {
  overflow: hidden;
}

JS：

burger.click(function(){
   $("body").toggleClass("disable-scroll");
});