Question

在iPhone上的Safari中，当我在菜单div中滚动时，导航菜单后面的.container div .div滚动，即使菜单覆盖在内容div的顶部。

这只发生在iPhone上，我不确定它是否与我所听到的称为过度滚动的东西有关？

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主要索引

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

这是即使在iPhone上打开导航div时滚动的内容div

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

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

感谢您的帮助！

Answer 1

你只需要为该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滚动它应该保持放置

1 个答案: