Fatal编程技术网
  • html/
  • Html iphone safari不显示滚动条

Html iphone safari不显示滚动条

html css

Html iphone safari不显示滚动条,html,css,webkit,mobile-safari,Html,Css,Webkit,Mobile Safari,我有一个带有 <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>

我有一个带有

<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>
但它并没有在iphone/ipad safari中显示滚动条来指示方向。尽管它在FF中显示滚动条，但在windows/mac上的Chrome。

溢出功能在iPhone/iTouch/iPad中受支持。只需使用2个手指（水平）滚动溢出部分，但不会显示滚动条。是的，我知道，很糟糕。人们需要通过谷歌搜索来发现……

两个手指滚动对我来说从来都不起作用，试着用iscroll来代替。滚动条总是隐藏在ipad/iphone中，只有在滚动时才会显示。

我将此css代码用于第一个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;
}
在iOS5中

-webkit-overflow-scrolling: touch;
也许，你会允许一个手指滚动。我还没有试过。

你试过设置overflow:scroll而不是overflow:auto吗？我不确定iPhone的浏览器是否会显示除你实际执行滚动时显示的滚动条之外的任何滚动条谢谢你的提示。2020年，我在Safari和Opera中的iPhone6上触摸
溢出：自动与桌面Chrome上的工作方式不同。例如，iPhone上溢出的内部容器正在滚动，但其部分内容被隐藏：内部滚动容器未显示此处显示的所有元素。
oveflow的替换：自动到
溢出：滚动帮助解决了该问题。

-webkit-overflow-scrolling: touch;