Question

我有一个非画布菜单。您可以看到，当菜单打开时，您可以正常滚动整个页面。 但我想要的是当菜单打开时，您无法滚动页面的任何其他部分，只能滚动菜单。我该怎么办呢？

<div class="soround">
    <div class="m-nav-container">
        <nav>
            <p>content</p>
            <p>content</p>
            ...
        </nav>
    </div>
    <div class="other">
    <button class="m-nav-opener">MENU</button>
            <p>content</p>
            <p>content</p>
            ...
    </div>
</div>

Answer 1

您可以将所有容器设置为height:100%，并在菜单打开时将overflow:hidden设置为<body>标记，以便禁用内容区域上的滚动。

<强> JSFIDDLE DEMO

＆＃13;

$(function () {
    $(".m-nav-opener").click(function () {
        if ($("body").hasClass("m-nav-open")) {
            $("body").removeClass("m-nav-open");
        } else {
            $("body").addClass("m-nav-open");
        }
    });
});

＆＃13;

html, body, .soround {
    height: 100%;
}
.m-nav-container {
    background: silver;
    position: fixed;
    z-index: 1;
    width: 300px;
    height: 100%;
    left: -300px;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
}
.m-nav-open {
    transform: translateX(300px);
    overflow: hidden;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="soround">
    <div class="m-nav-container">
        <nav>
            <p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p><p>menu</p>
        </nav>
    </div>
    <div class="other">
        <button class="m-nav-opener">MENU</button>
        <p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p><p>content</p>
    </div>
</div>

＆＃13;

如何修复非画布菜单的滚动？

1 个答案: