開いているメニューdivの背後にあるdivはスクロールしておくべきです。

Question

iPhoneのSafariではナビゲーションメニューの後ろにある.container div。メニューがdivの上にスクロールするとスクロールします。コンテンツ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> 

HTMLメインインデックス

<?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ここで

は、NAVのdiv要素がオーバー開かれたときにもスクロールするコンテンツのdiv要素でありますそれをここで

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

はNAV divのための私のCSSですが、心の中で、私は問題

を経験しています私もサイズで、このCSSの一部を上書き含まれるメディアクエリーを保ちます

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

：ここ

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

は、フルスクリーンメニューを持っているサイズのためのメディアクエリです210

ありがとうございました！

Answer 1

は、あなただけではdiv要素 に固定された位置を置くために持っているか、あなたは

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