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;

也许，你会允许一根手指滚动。我还没试过。

Answer 3

两根手指滚动对我来说从未奏效，请尝试使用 iscroll 。滚动条始终隐藏在ipad / iphone中，只有在滚动时才会显示。

iphone safari没有显示滚动条

3 个答案: