Scrolling ability in a fixed div

Question

I have a div that slide from the left 100% once you press a button. In that div it will display my menu for the site. The issue I am having is when on a small browser size the content gets covered and you are unable to see the rest of the links.

My div #slidingMenu has a fixed positioning and I gave the div an overflow-y:scroll. Once I added that code I did have the ability to scroll. But the problem was #slidingMenu now slides out displaying a white bar (scrollbar). Is there a way to have the main scrollbar of the browser control my menu in #slidingMenu when I scroll?

Here is the css and the file http://jsfiddle.net/bC5zh/6/

 #footer{
  background-color:#999;
  width:100%;
  height:50px;
  position:absolute;
  top:100%;
  margin-top:-50px;
  line-height:50px;
 }
 #toggle{
  color:#FFF;
  margin-left:50px;
  cursor:pointer;
 }
 #slidingMenu{
  position:fixed;
  background-color:#999;
  width:100%;
  height:100%;
  top:0;
  left:-100%;
  overflow-y:scroll;
 }

Answer 1

You would use

overflow-y:auto;

To remove the scrollbar but allow for scrolling when inner content is overflowing, updated fiddle

For a smoother scroll on WebKit mobile devices you can use

 -webkit-overflow-scrolling: touch;

Which mimics default iOS scrolling reference

Answer 2

Try adding in your css

 #slidingMenu::-webkit-scrollbar { 
   display: none; 
 }

this will hide the scrollbar giving you the ability to still scroll on the site.