[英]Make scrollbar visible in mobile browsers
当我有一个带有可滚动内容的网页时。 使用 css 属性“overflow:auto”或“overflow:visible”,滚动条在桌面浏览器上可见,但是当我在移动浏览器上打开页面时,滚动条仅在我尝试滚动时出现。 有没有办法让滚动条在移动设备上始终可见? 我尝试了一些 JQuery 库,但没有一个有效。
html 代码很简单,我有一个带有 IFrame 的可滚动 div:
<div id="wrapper">
<iframe id="frameContent" src="mysite" scrollable="yes"></iframe>
</div>
css:
#wrapper{
overflow: scroll;
-webkit-overflow-scrolling: touch;
width: 500px;
height: 200px;
}
#frameContent{
width: 100%;
height: 100%;
}
尝试将以下内容添加到您的 CSS 中,注意这是特定于webkit 的:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
/* !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;
}
添加此 css 代码 - 它只会更改移动设备中滚动条的样式
对于 Safari、IOS 浏览器的问题,
环境
-webkit-overflow-scrolling: 自动
连同上面其他 ::-webkit-scrollbar 解决方案中提到的 CSS 一起,效果很好
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.