iphone safari not showing scroll bars [duplicate]

Question

I have a web page with

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>

<div id="map_container">
        <div id="map_canvas"></div>
        <div id="directions"></div>
    </div>

CSS

#map_container {width: 500px; height: 500px; }
#map_canvas {width: 100%; height: 50%; border: solid thin black; }
#directions {width: 98%; height: 45%; border: solid thin black; overflow: auto;}

But its not showing scroll bars in iphone/ipad safari for directions. Although its showing scroll bars in FF, Chrome on windows/mac.

Answer 1

Overflow is supported in iPhone/iTouch/iPad. Just use 2 fingers (horizontal) to scroll the overflow portion but no scrollbar will be shown. Yeah I know, it sucks. People need to google it to find out...

Answer 2

i am using this css code for 1st iPod Touch.

#directions{
overflow-y: scroll;
overflow-x: scroll;
}
#directions::-webkit-scrollbar {
background: transparent;
height: 10px;
overflow: visible;
width: 10px;
}
#directions::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0.2);
-webkit-border-radius:5px;
}
#directions::-webkit-scrollbar-thumb:hover{
background-color: rgba(0, 0, 0, 0.6);   
}
#directions::-webkit-scrollbar-corner {
background: transparent;
}

In iOS5,

-webkit-overflow-scrolling: touch;

maybe, You will allow one finger to scroll. I did not try it yet.