在WebKit/Blink中,防止MacOS触摸板用户隐藏滚动条
在WebKit/Blink中,防止MacOS触摸板用户隐藏滚动条
自Mac OS X Lion(10.7)以来,WebKit / Blink(Safari / Chrome)在MacOS上默认为轨迹板用户隐藏滚动条,当它们未被使用时。这可能会令人困惑;滚动条通常是提示元素可以滚动的唯一视觉线索。
示例(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月22日
控制滚动条的外观可以使用 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) 截图