iphone safari not showing scroll bars

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.

have you tried setting overflow:scroll instead of overflow:auto? — Brian Driscoll, Nov 12 '10 at 21:00
I'm not sure whether iPhone's browser even shows any sort of scrollbars besides the one you get when you actually perform a scroll — Jani Hartikainen, Nov 12 '10 at 21:20

score 6 · Accepted Answer · answered Mar 04 '11 at 03:01

6

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...

answered Mar 04 '11 at 03:01

trueblue

76
1
2

piayo · Answer 2 · 2011-10-13T09:47:33.997

5

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.

edited Oct 13 '11 at 09:47

answered Oct 13 '11 at 09:40

piayo

101
2
4

thanks for the hint. In 2020 in my case on iPhone6 in Safari and Opera Touch the `overflow: auto;` on the wrapper element did not work same as on desktop Chrome. I.e. the overflowed inner container on iPhone was scrolling but the part of its content was hidden: the inner scrolled container did not show all the elements presentedthere. The replace of `oveflow: auto;` to `overflow: scroll;` helped to solve the issue. – Valentine Shi Apr 10 '20 at 06:04

score 1 · Answer 3 · answered Mar 08 '11 at 22:00

1

Two fingers scrolling never worked for me, try to use iscroll instead. Scroll bar is always hidden in ipad/iphone, it only shows up when you are scrolling it.

answered Mar 08 '11 at 22:00

user227353

2,594
2
15
13

iphone safari not showing scroll bars

3 Answers3

Linked