Question

我的主要内容中有一个'position：absolute;'菜单。

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

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

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

目前正在发生在机器人股票浏览器上。

我需要下方的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

当我完成了你想要调用它的推送菜单或画布菜单时，我使用了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; }

然后只需将click事件添加到menu-btn即可将活动类添加到右侧面板

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

我知道你并没有问到如何做滑动菜单的事情，但我希望我所做的结构可能会帮助你解决滚动问题。我没有以这种方式处理这个问题。

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

1 个答案: