iphone safari没有显示滚动条

Question

我有一个网页

<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;}

但它没有在iphone/ipad safari中显示方向滚动条.虽然它在FF中显示滚动条,但在windows/mac上显示Chrome.

Answer 1

iPhone/iTouch/iPad支持溢出功能.只需使用2个手指(水平)滚动溢出部分,但不会显示滚动条.是的,我知道,它很糟糕.人们需要谷歌查找...

Answer 2

我正在为第一个 iPod Touch 使用此 css 代码。

#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;
}

在iOS5中，

-webkit-overflow-scrolling: touch;

也许，您将允许一根手指滚动。我还没有尝试。