Offcanvas 메뉴가있는 동적 스크롤 막대

내 offcanvas 메뉴에는 스크롤링 하위 메뉴가있는 짧은 주 메뉴가 있습니다. 문제는 메인 메뉴가 스크롤되는 것을 원하지 않는다는 것입니다. 그러나 은 서브 메뉴가 스크롤되기를 원합니다. 서브 메뉴가 동적이기 때문입니다. CSS 솔루션을 선호하지만 좋은 해결책이 없다면 jQuery가 좋습니다.Offcanvas 메뉴가있는 동적 스크롤 막대

하위 메뉴를 display: none;으로 설정하고 활성 상태가되면 display: block;으로 설정하려고했으나 어떤 이유로 인해 (크롬에서) 애니메이션이 작동하지 않습니다.

jsFiddle Example

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% 설정 ul 요소 자체의 오버플로를 사용하면 매우 간단하게 문제를 해결할 수 있습니다. 다음은 자식 컨테이너가 활성화되었을 때 부모 컨테이너에 대한 스크롤을 제거하는 것입니다.

이렇게하면 스크롤바가 모든 메뉴가 아닌 각 메뉴의 높이에만 해당된다는 문제도 해결됩니다.

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 메뉴가있는 동적 스크롤 막대

답변

관련 문제