0

before asking i already saw these question on the same topic, without figure out a solution:

Questions that i saw

  1. Question
  2. Question
  3. Question

Desidered Behaviour

When i click on the menu button i've to stop the vertical scrolling (or the map content will go over the menu, as you can see in the pen )

Problem

I don't understand how to stop the vertical scroll when the menu is open.

Code

This is the css regarding the menu 

@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;
  }
}

Down below you have the 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

Legeo
  • 784
  • 4
  • 20
  • 44

2 Answers2

2

You can set overflow: hidden to your body element when user clicks the menu button. It stops page from being scrolled.

Css : 

body.disable-scroll {
  overflow: hidden;
}

JS :

burger.click(function(){
   $("body").toggleClass("disable-scroll");
});
Ozturk Can Gokkaya
  • 315
  • 1
  • 2
  • 8
  • Perfect, thanks for the answer, you solved the problem! Really thank you for your this solution. – Legeo Oct 02 '18 at 08:54
  • 1
    You should be aware of that setting overflow hidden to your body will cause your page to scroll top. – Ozturk Can Gokkaya Oct 02 '18 at 08:56
  • So everytime that i click on the menu the page will return to the top. no, i didn't know that... just to understand if i'm in a good way to solve this: i can store the previous scroll in a variable (with js) and when i close the menu i can re-use this variable to return at the previous point. – Legeo Oct 02 '18 at 09:00
  • 1
    You can also disable your body scroll permanently and make your
    element scrollable. I believe it solves your problem perfectly.
     – Ozturk Can Gokkaya Oct 02 '18 at 09:12
  • 1- Add overflow: hidden; to your body. 2- Add height: 100%; and overflow: auto; to your
    element. These changes will cause some layout problems but i believe you can solve them easily.
     – Ozturk Can Gokkaya Oct 02 '18 at 09:17
1

You don't need to disable the scroll. You can make use of the z-index css property. If you add to your menu container div a style of z-index: 10 and your div with an id of map a z-index: 5, this will place the map behind the menu.

Think of it as a 3D index, the lower the index the lower the layer you are applying to the element, the higher the index the higher the layer in the hierarchy.

More here: https://www.w3schools.com/cssref/pr_pos_z-index.asp

You could also use JS to disable scrolling only when the menu is open but if you only want to solve the issue with the map, the easiest way is to use z-index.

rodcunha
  • 387
  • 1
  • 16
  • Really thank you for your kind answer. I already use it, as you can see in my code ( i've just to update the pen and i will do it after i will write this comment ) The problem is that scrolling when the menu is open it's useless, and ugly imho. – Legeo Oct 02 '18 at 08:47