如何防止 WebKit/Blink 浏览器中的 macOS 触控板上的滚动条隐藏？

在 WebKit/Blink 中防止 macOS 触控板用户隐藏滚动条

自版本 10.7 起，在 macOS 中，WebKit/Blink 浏览器（例如 Safari） 、Chrome）在不使用时自动向触控板用户隐藏滚动条。此行为可能会掩盖确定元素可滚动性的基本视觉提示。

默认 WebKit 行为：

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!

急速行为（例如， Opera):

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!

解决方案：永久显示滚动条

要强制滚动条在 WebKit 中保持可见，请使用 -webkit-scrollbar 操纵其外观伪元素:

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;
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track {
    background-color: #fff;
    border-radius: 8px;
}

结果:

Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!

通过禁用默认滚动滚动条外观并定义自定义样式，我们确保滚动条对 macOS 触控板用户保持可见。