iphone safari没有显示滚动条[重复]答案

【问题标题】：iphone safari not showing scroll bars [duplicate]iphone safari没有显示滚动条[重复]
【发布时间】：2010-11-12 20:55:51
【问题描述】：

我有一个网页

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

【问题讨论】：

您是否尝试过设置溢出：滚动而不是溢出：自动？
我不确定 iPhone 的浏览器是否会显示除实际执行滚动时获得的滚动条之外的任何类型的滚动条

标签： html css webkit mobile-safari

【解决方案1】：

iPhone/iTouch/iPad 支持溢出。只需使用 2 根手指（水平）滚动溢出部分，但不会显示滚动条。是的，我知道，这很糟糕。人们需要用谷歌搜索才能找到...

【讨论】：

【解决方案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;

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

【讨论】：

感谢您的提示。在 2020 年，我在 Safari 和 Opera Touch 上的 iPhone6 上，包装元素上的 overflow: auto; 与桌面 Chrome 上的工作方式不同。 IE。 iPhone 上溢出的内部容器正在滚动，但它的部分内容被隐藏：内部滚动容器没有显示那里呈现的所有元素。将oveflow: auto; 替换为overflow: scroll; 有助于解决问题。

【解决方案3】：

两指滚动对我来说从来没有用过，请尝试改用 iscroll。滚动条在ipad/iphone中总是隐藏的，只有在你滚动的时候才会出现。

【讨论】：