Html 我打开的菜单div后面有一个div，当它应该保持不变时会滚动

在iPhone上的Safari中，导航菜单后面有一个.container div。当我在menu div中滚动时，div会滚动，即使菜单覆盖在content div的顶部

这只发生在iPhone上，我不确定这是否与我听说的overscroll有关

HTML导航

<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>

这是我的导航div CSS，但请记住，我还包括了媒体查询，以我遇到问题的大小覆盖一些CSS

/* 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;
}

以下是具有全屏菜单的大小的媒体查询：

/*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;}
}

---

谢谢你的帮助

你只需要给那个div设置一个固定的位置 或者，如果需要代表父div的浮动div，则可以放置绝对位置

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

---

你只需要给那个div设定一个固定的位置 或者，如果需要代表父div的浮动div，则可以放置绝对位置

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

---

谢谢，但添加位置：固定；防止内容区域滚动。我还声明，根据您的要求，您可以选择“绝对”属性。谢谢，但添加位置：固定；阻止内容区域滚动。我还声明，根据您的要求，您可以选择“绝对”属性

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