Ein div hinter meinem geöffneten Menü div scrollt, wenn es bleiben soll

Question

In Safari auf einem iPhone ein .container div, das hinter einem Navigationsmenü ist .div scrollt, wenn ich im Menü div blättern, obwohl das Menü oben überlagert ist des Inhalts div.

Das passiert nur auf einem iPhone und ich bin mir nicht sicher, ob es sich um etwas handelt, von dem ich gehört habe, das man Overscroll nennt?

HTML Nav

<button class="c-hamburger c-hamburger--htx"> 
    <span>toggle menu</span> 
</button> 
<nav id="sidebar" class="nav-container"> 
<!--Menu icon--> 

<!--Widget area--> 
<?php if (is_active_sidebar('home_left_1')) : ?> 
    <div id="primary-sidebar" class="nav-container primary-sidebar widget-area" role="complementary"> 

     <?php dynamic_sidebar('home_left_1'); ?> 
    </div><!-- #primary-sidebar --> 
<?php endif; ?> 

<!--Menu js--> 
<script> 
    (function() { 

    "use strict"; 

    var toggles = document.querySelectorAll(".c-hamburger"); 

    for (var i = toggles.length - 1; i >= 0; i--) { 
     var toggle = toggles[i]; 
     toggleHandler(toggle); 
    }; 

    function toggleHandler(toggle) { 
     toggle.addEventListener("click", function(e) { 
     e.preventDefault(); 
     (this.classList.contains("is-active") === true) ? this.classList.remove("is-active") : this.classList.add("is-active"); 
     }); 
    } 

    })(); 

    $('.c-hamburger').click(function() { 
    $("#sidebar").toggleClass("show"); 
    }); 


</script> 

</nav> 

HTML Hauptindex

<?php get_header(); ?> 

<?php get_sidebar(); ?> 

<div id="main" class="content"> 
    <div id="content" class="content-container"> 
     <section> 
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?> 
      <p><?php the_content(__('(more...)')); ?></p> 
      <?php endwhile; else: ?> 
      <p><?php _e('Sorry, no posts matched your criteria.'); ?></p><?php endif; ?> 
     </section> 
    </div> 
</div> 

<div id="delimiter"></div> 

<?php get_footer(); ?> 

CSS

Hier ist der Inhalt div, dass auch scrollt, wenn das nav div über geöffnet es auf a n iPhone

/* Content area 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
.content {padding-left: 20rem;} 

.content-container { 
    display: block; 
    margin: 0px auto; 
    max-width: 78rem; 
    text-align: left; 
    padding: 0 4rem 0 4rem; 
} 

.content-container section {padding: 1.25rem;} 

Hier ist meine CSS für das nav div, aber halten die die Medien Abfrage daran, dass Ich habe auch an der einige dieser CSS überschreiben, wo ich erlebe ein Problem

Hier

/* Nav 
–––––––––––––––––––––––––––––––––––––––––––––––––– */ 
nav { 
    position: fixed; 
    width: 20rem; 
    text-align: center; 
    left: 0; 
    top: 0; 
    bottom: 0; 
    background-color: white; 
    opacity: 1; 
    overflow-y:auto; 
    padding-bottom: 4rem; 
    transition: opacity .3s ease-in-out; 
    -moz-transition: opacity .3s ease-in-out; 
    -webkit-transition: opacity .3s ease-in-out; 
    z-index: 8; 
} 

/*hides sidebar for mobile breakpoints*/ 
nav.show {opacity: 1; pointer-events: all;} 

nav .nav-container { 
    display: inline-block; 
    padding-top: 5rem; 
    width: 50%; 
    text-align: left; 
} 

ist die Medienabfrage für die Größe, die ein Vollbild-Menü hat:

/*xx small*/ 
@media (min-width: 0px) and (max-width: 600px) { 
    html {font-size: 10.5px;} 

    .content {padding-left: 0;} 
    .content-container {padding: 0 1.5rem 0 1.5rem;} 

    .c-hamburger {display: block;} 

    nav {height: 100%; pointer-events: none; opacity: 0; width: 100%;} 
    nav .nav-container {float: left; padding: 9rem 0 0 6rem;} 
    nav a {font-size: 1.83rem;} 
    nav #logo {height: 4rem; width: 4rem; margin-bottom: 4rem;} 

    p {font-size: 1.83rem; font-weight: 300; line-height: 2.7rem;} 
    p, h2 {width: 100%;} 
    h1 {padding-top: 8rem;} 
    /*give h2 intro some space*/ 
    h2 + h3 {padding-top: 5rem;} 

    h2 + h4 {padding-top: 5rem;} 

    h2 + p {padding-top: 5rem;} 
} 

Vielen Dank für Ihre Hilfe!

Answer 1

Sie müssen nur eine feste Position zu diesem div setzen oder Sie können die absolute Position setzen, wenn Sie ein schwebendes div im Auftrag von Mutter div brauchen

.content-container { 
    display: block; 
    margin: 0px auto; 
    max-width: 78rem; 
    text-align: left; 
    position:fixed;//absolute for floating 
    padding: 0 4rem 0 4rem; 
}