스크롤바없이 배경 콘텐츠를 스크롤하지 않고 고정 위치 div를 스크롤 가능하게 만듭니다.

개발중인 웹 사이트에서 모바일 버전의 기본 메뉴에 사용되는 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%;
}

자바 스크립트 :

$('.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>

내가 가장하는 것을 성취 할 수있는 것이 있습니까?