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

问题描述

当我有一个包含可滚动内容的网页时.使用 css 属性overflow:auto"或overflow:visible"，滚动条在桌面浏览器上可见，但是当我在移动浏览器上打开页面时，滚动条仅在我尝试滚动时出现.有没有办法让滚动条在移动设备上始终可见?我尝试了一些 JQuery 库，但都没有奏效.

html 代码很简单，我有一个带有 IFrame 的可滚动 div:

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

CSS:

#wrapper{溢出:滚动；-webkit-overflow-scrolling:触摸；宽度:500px；高度:200px；}#frameContent{宽度:100%；高度:100%；}

解决方案

尝试将以下内容添加到您的 CSS 中，注意这是 webkit 具体:>

演示小提琴

::-webkit-scrollbar {-webkit 外观:无；}::-webkit-scrollbar:vertical {宽度:12px；}::-webkit-scrollbar:horizo​​ntal {高度:12px；}::-webkit-scrollbar-thumb {背景颜色:rgba(0, 0, 0, .5);边框半径:10px；边框:2px 实心 #ffffff；}::-webkit-scrollbar-track {边框半径:10px；背景色:#ffffff；}

when I have a web page with a scrollable content. With css property "overflow:auto" or "overflow:visible" the scrollbar is visible on desktop browsers, but when I open the page on mobile browsers the scrollbar appears only when I try to scroll.Is there a way to make the scrollbar always visible on mobile devices? I have tried some JQuery libraries but none of them have worked.

The html code is trivial, I have a scrollable div with an IFrame inside:

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

The css:

#wrapper{
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

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

解决方案

Try adding the below to your CSS, note that this is webkit specific:

Demo Fiddle

::-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;
}

这篇关于使滚动条在移动浏览器中可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！