Question

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

我已尝试将子菜单设置为display: none;，然后在其变为活动状态时将其设置为display: block;，但这会因某些原因阻止动画（在chrome中）。< / p>

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');
});
})

Answer 1

设置所有子菜单的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');
    });
})

带有offcanvas菜单的动态滚动条

1 个答案: