jquery - Make fixed position div scrollable without scrollbar and without scrolling the background content -

in website i'm developing have div that's used main menu in mobile version.

that div fixed (css below) in cases it's height greater device's height.

i want style div have max-height: 100% but, if content overflows device's height, need scrollable without scrollbar , without moving rest of website.

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> 

is there can achieve pretend?

this ugly works

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

https://jsfiddle.net/sk9dhgbj/