使固定位置div可滚动，无需滚动条，也无需滚动背景内容

Question

在我正在开发的一个网站中，我有一个div，用于移动版的主菜单。

这个div是固定的（下面是css），但在某些情况下，它的高度大于设备的高度。

我想将div样式设置为最大高度：100%，但是，如果内容溢出设备的高度，我需要它在没有滚动条的情况下可滚动，并且不移动网站的其余部分。

CSS:

.mobile_menu 
{
    display: none; /*toggled onclick*/
    position: fixed;
    right: 0; 
    top: 86px; /*standard value. calculated after via javascript shown below*/
    z-index: 9;
    width: 100%;
}

JAVASCRIPT：

$('.mobile_menu').css("top", $("#header_left").height());

HTML格式：

<div class="mobile_menu" style="top: 63px; display: block;">
    <ul>
        <li data-element="1">
            <a href="javascript:void(0);">
                <span>a</span>
            </a>
        </li>
        <li data-element="2">
            <a href="javascript:void(0);">
                <span>b</span>
            </a>
        </li>
        <li data-element="3">
            <a href="javascript:void(0);">
                <span>c</span>
            </a>
        </li>
        <!-- ... -->
    </ul>
</div>

我能实现我假装的东西吗？

Answer 1

删除此内容：

style="top: 63px; display: block;" in your HTML

Answer 2

这很难看但很管用

.mobile_menu 
{
    //...
    height: 100%;
    overflow: scroll;
    right: -25px;
}

https://jsfiddle.net/sk9dhgbj/