在iPad上是否有可能强制显示滚动条?
在iPad上是否有可能强制显示滚动条?
自 Mac OS X Lion(10.7)以来,WebKit / Blink(Safari / Chrome)的默认行为是在触控板用户不使用时隐藏滚动条。 这可能令人困惑;滚动条通常是一个可滚动元素的唯一视觉提示。
示例(jsfiddle)
HTML
Foo Bar Baz Help I'm trapped in an HTML factory!
CSS
.frame { overflow-y: auto; border: 1px solid black; height: 3em; width: 10em; line-height: 1em; }
WebKit(Chrome)屏幕截图
Presto(Opera)屏幕截图
我如何强制在WebKit中始终显示可滚动元素的滚动条?
admin 更改状态以发布 2023年5月24日
可以使用WebKit的-webkit-scrollbar
伪元素来控制滚动条的外观[博客]。您可以通过将 -webkit-appearance
[文档]设置为none
来禁用默认的外观和行为。
因为您正在删除默认样式,因此还需要自己指定样式,否则滚动条将永远不会显示。以下CSS重新创建了隐藏滚动条的外观:
示例 (jsfiddle)
CSS
.frame::-webkit-scrollbar { -webkit-appearance: none; } .frame::-webkit-scrollbar:vertical { width: 11px; } .frame::-webkit-scrollbar:horizontal { height: 11px; } .frame::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; /* should match background, can't be transparent */ background-color: rgba(0, 0, 0, .5); } .frame::-webkit-scrollbar-track { background-color: #fff; border-radius: 8px; }
WebKit(Chrome)屏幕截图