当我有一个带有可滚动内容的网页时。使用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; }