javascript - 绝对位置，可滚动元素，在内容下方，干扰主要内容的滚动

Question

我的主要内容下方有一个“position:absolute;”菜单。

我正在使用 snap.js 将内容向右滑动，显示菜单。

菜单应该能够容纳任意数量的元素，因此它需要overflow:auto;，因此可以滚动。

当菜单为 overflow:auto; 时，它会阻止主要内容滚动(可能后面的元素仍在滚动)。

这目前正在 androids stock 浏览器上发生。

我需要下面的 z-index:0; 菜单可以滚动，但也允许 z-index:1; 主要内容也有正常的滚动功能。

我第一次尝试使用这个 jQuery:

jQuery(document).ready(function($){

    $('.snap-drawer').on('touchstart', function() {
        $('.snap-drawer').addClass('ovrflowAuto');
    });

    $('.snap-drawer').on('touchend', function() {
        $('.snap-drawer').removeClass('ovrflowAuto');
    });

});

运气不好。

HTML(任意菜单项)

<div class="snap-drawers">
    <div class="snap-drawer snap-drawer-left">
         <h1>
        <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
      </h1>

        <form method="get" id="snapform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
            <input type="text" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" />
            <input type="submit" class="submit" name="submit" id="searchsubmit" />
        </form> <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>

        <?php $menuParameters=a rray( 'theme_location'=>'sidebar-menu', 'container' => false, 'echo' => false, 'items_wrap' => '%3$s', 'depth' => 0, ); echo strip_tags(wp_nav_menu( $menuParameters ), '<a>' ); ?>
        <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>
 <a href="<?php echo get_option('home'); ?>" class="clr_format">L'ART Magazine</a>

    </div>
</div> 

CSS

    .snap-drawers {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index:0;
    background-color:#222;
    text-align:center;
}
.snap-drawer {
    position: absolute;
    top: 0;
    right: auto;
    bottom: 0;
    left: auto;
    width: 265px;
    height: auto;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: width 0.3s ease;
    -moz-transition: width 0.3s ease;
    -ms-transition: width 0.3s ease;
    -o-transition: width 0.3s ease;
    transition: width 0.3s ease;
}
.snap-drawer > h1 {
    color:#ddd;
    font-size:1.5em;
    font-family:'Poiret One', cursive;
    padding:20px 0 20px 0;
}
.snap-drawer > a {
    background-color:#666;
    border-bottom:5px solid #222;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    width:100%;
    padding:15px 0 15px 0;
    color:#ddd;
    display:block;
    text-decoration:none;
    font-family:'News Cycle', sans-serif;
    font-size:1.2em;
}
.snap-drawer a:active {
    background-color:#444;
}
#snapform {
    padding:0 0 10px 0;
}
#snapform input {
    height:30px;
    border-radius:20px;
    width:80%;
    padding-left:30px;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
.snap-drawer-left {
    left: 0;
    z-index: 0;
}
.snapjs-left .snap-drawer-right, .snapjs-right .snap-drawer-left {
    display: none;
}

内容包装器:

div#wrapper {
    height:100%;
    background-color:#fff;
    z-index:2;
    width:100%;
}

Answer 1

当我完成推送菜单或 Canvas 外菜单(无论您喜欢称之为什么)时，我使用了 html 元素的自然索引而不是 z-index，因为某些浏览器有问题。然后我使用 jQuery 或 JS 添加了一个触发幻灯片的 css 类。它还为两个面板提供了独立滚动的能力，并且应该按照您的需要进行操作。

我是这样设置html的

<div class="wrap">                  // if z-index started here 
    <div class="left-panel"></div> // z-index is 0
    <div class="right-panel> // z-index is 1
       <button class="menu-btn">Button to slide the panel</button>
    </div>
</div>

然后是 css **您可以根据自己的要求单独编辑面板

wrap { width:100%; height:100%; }
left-panel { width:300px; height:100%; overflow-x:hidden; overflow-y:scroll; }
right-panel { 
     width:100%; 
     height:100%; 
     position:absolute; 
     top:0; left:0; 
     transition: left 0.5s ease; /* add vendors transitions */
}
right-panel.active { left:300px; /*width of left panel*/ }
.menu-btn { position:absolute; top: 1em; left:1em; }

然后只需将点击事件添加到 menu-btn 即可将 Activity 类添加到右侧面板

$('.menu-btn').on('YOUREVENT', function() {
      $('.right-panel').addClass('active');
});

我知道你并不是在问如何做幻灯片菜单的事情，但我希望我做的结构可能会帮助你解决溢出滚动问题。我没有以这种方式遇到那个问题。