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

【问题标题】：Make fixed position div scrollable without scrollbar and without scrolling the background content使固定位置 div 可滚动，无需滚动条且无需滚动背景内容
【发布时间】：2015-10-07 09:15:58
【问题描述】：

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

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

我想将 div 设置为具有 max-height: 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>

有什么我可以实现的吗？

【问题讨论】：

你能提供一个活生生的例子或小提琴吗？

标签： jquery html css scroll fixed

【解决方案1】：

这很丑，但它有效

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

https://jsfiddle.net/sk9dhgbj/

【讨论】：

【解决方案2】：

删除这个：

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

【讨论】：

由Javascript生成。
它是由Javascript生成的，如上所述。显示在块和无之间切换。顶部是根据标题的高度计算的。