具有offcanvas菜单的动态滚动条

我的offcanvas菜单有一个带有滚动子菜单的简短主菜单。问题是我不希望主菜单滚动，但我可能希望子菜单滚动，因为子菜单是动态的。我更喜欢CSS解决方案，但如果没有好的解决方案，jQuery是好的。具有offcanvas菜单的动态滚动条

我试图设置子菜单为display: none;，然后在其变为活动状态时将其设置为display: block;，但由于某些原因，这会阻止动画工作（以镶边方式）。

HTML：

<ul> 
    <li class="blah">One</li> 
    <li class="blah">One</li> 
    <li class="blah">One</li> 
    <li class="blah"> 
     One Sub 
     <ul> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
      <li>two</li> 
     </ul> 
    </li> 
    <li class="blah">One</li> 
    <li class="blah">One</li> 
<ul>

CSS：

html,body{border:0;padding:0;margin:0;} 
ul 
{ 
    padding:0;margin:0; 
    display: block; 
    background-color: white; 
    position: relative; 
    width: 250px; 
    z-index: 1; 
} 
ul ul 
{ 
    position: absolute; 
    top: 0; 
    left: -250px; 
    -webkit-transform: translateX(0); 
    transform: translateX(0); 
    -webkit-transition: .5s ease all; 
    transition: .5s ease all; 
    z-index: 2; 
    border: 0; 
} 
ul .active ul 
{ 
    -webkit-transform: translateX(250px); 
    transform: translateX(250px); 
}

的jQuery：

$(document).ready(function() 
{ 
$('.blah:not(.active)').on('click', function() 
{ 
    $(this).addClass('active'); 
}); 
$('li li').on('click', function(event) 
{ 
    event.stopPropagation(); 
    $('.active').toggleClass('active'); 
}); 
})

来源

2014-10-02 Erik Philips

设置所有的子菜单的Height: 100%并且使用元素上的溢出本身很简单地解决了这个问题。接下来是在子容器处于活动状态时移除父容器的滚动。

这也解决了滚动条是特定于每个菜单高度，而不是所有菜单。

JsFiddle Solution

更新CSS

html,body{border:0;padding:0;margin:0;height:100%;} 
ul 
{ 
    padding:0;margin:0; 
    display: block; 
    background-color: white; 
    position: relative; 
    width: 250px; 
    z-index: 1; 
    height: 100%; 
    overflow-y: auto; 
    overflow-x: hidden; 
} 
.noscroll 
{ 
    overflow-y: hidden; 
}

更新JS：

$(document).ready(function() 
{ 
    $('li:not(.close)').on('click', function() 
    { 
     $(this).addClass('active'); 
     $(this).closest('ul').addClass('noscroll'); 
    }); 
    $('li.close').on('click', function(event) 
    { 
     event.stopPropagation(); 
     $(this).closest('.active').removeClass('active'); 
     $(this).closest('.noscroll').removeClass('noscroll'); 
    }); 
})

来源

2014-10-02 19:40:45

具有offcanvas菜单的动态滚动条

回答

相关问题