使固定位置 div 可滚动而无需滚动条且无需滚动背景内容
Make fixed position div scrollable without scrollbar and without scrolling the background content
在我正在开发的网站中,我有一个 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>
有什么可以实现我假装的吗?
删除这个:
style="top: 63px; display: block;" in your HTML
这很丑陋,但它有效
.mobile_menu
{
//...
height: 100%;
overflow: scroll;
right: -25px;
}
在我正在开发的网站中,我有一个 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>
有什么可以实现我假装的吗?
删除这个:
style="top: 63px; display: block;" in your HTML
这很丑陋,但它有效
.mobile_menu
{
//...
height: 100%;
overflow: scroll;
right: -25px;
}