Javascript 使滚动条在移动浏览器中可见

当我有一个可滚动内容的网页时。使用css属性“overflow:auto”或“overflow:visible”，滚动条在桌面浏览器上可见，但当我在移动浏览器上打开页面时，滚动条仅在我尝试滚动时出现。 有没有办法让滚动条在移动设备上始终可见？我尝试了一些JQuery库，但都不起作用

html代码很简单，我有一个可滚动的div，里面有一个IFrame：

<div id="wrapper">
    <iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>

---

尝试将以下内容添加到CSS中，请注意：

：：-webkit滚动条{
-webkit外观：无；
}
：-webkit滚动条：垂直{
宽度：12px；
}
：-webkit滚动条：水平{
高度：12px；
}
：-webkit滚动条拇指{
背景色：rgba（0,0,0,5）；
边界半径：10px；
边框：2个实心#ffffff；
}
：-webkit滚动条轨迹{
边界半径：10px；
背景色：#ffffff；
}

---

添加此css代码-它将仅更改移动设备中滚动条的样式，以解决Safari、IOS浏览器、

背景

-webkit溢出滚动：自动

---

除了上面提到的CSS之外，其他：：-webkit scrollbar解决方案在这里工作得很好

不幸的是，您的JSFIDLE没有预期的行为…滚动条不可见您使用的浏览器是什么？…但是CSS与我的html页面一起工作…问题解决了！谢谢此解决方案不适用于iOS8上的Chrome。还有其他想法吗？在iOS Safari上似乎不起作用。适用于android，但不适用于iOS mobile。也许是因为我在使用safari，尽管它也在我的mac上使用safari响应设计模式。非常奇怪。在iOS Safari上没有表现。有人在Safari上用

-webkit溢出滚动：Auto在
：：-webkit滚动条
元素中？
#wrapper{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent{
    width: 100%;
    height: 100%;
} 

  /* !important is needed sometimes */
 ::-webkit-scrollbar {
    width: 12px !important;
 }

 /* Track */
::-webkit-scrollbar-track {
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) !important;
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
 }

 /* Handle */
 ::-webkit-scrollbar-thumb {
   -webkit-border-radius: 10px !important;
   border-radius: 10px !important;
   background: #41617D !important; 
   -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) !important; 

 }
 ::-webkit-scrollbar-thumb:window-inactive {
   background: #41617D !important; 
 }