首页  >  文章  >  web前端  >  如何强制滚动条出现在移动浏览器上?

如何强制滚动条出现在移动浏览器上?

Linda Hamilton
Linda Hamilton原创
2024-11-10 08:36:02541浏览

How Can I Force Scrollbars to Appear on Mobile Browsers?

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

此问题重点关注使用“overflow:auto”或“”时移动浏览器中隐藏滚动条的问题可滚动内容上的“溢出:可见”。虽然滚动条在桌面浏览器上可见,但除非主动滚动,否则它会在移动设备上消失。

要解决此问题,您可以修改 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;
}

此代码定义滚动条的外观,包括其宽度、高度、拇指颜色和轨道颜色。通过自定义这些属性,您可以使滚动条在移动设备上始终可见,甚至在滚动之前也是如此。

以上是如何强制滚动条出现在移动浏览器上?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn