如何确保滚动条在手机浏览器中始终可见？

如何在移动浏览器中显示滚动条

尽管 CSS 属性如“overflow:auto”和“overflow:visible”显示滚动条与桌面浏览器不同，移动浏览器通常会隐藏它们，直到滚动开始。本文介绍如何使滚动条在移动设备上始终可见，即使不使用无效的 jQuery 库。

考虑以下 HTML 和 CSS 代码：

<div>

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

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

要制作滚动条要在移动设备上始终可见，请添加以下 CSS：

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

此代码特定于 WebKit 浏览器引擎，可修改滚动条的外观，确保其在移动设备上的可见性。

以上是如何确保滚动条在手机浏览器中始终可见？的详细内容。更多信息请关注PHP中文网其他相关文章！