如何防止 WebKit/Blink 浏览器中的 macOS 触控板上的滚动条隐藏？-css教程-PHP中文网

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

Mary-Kate Olsen

发布： 2025-01-04 08:45:33

原创

463 人浏览过

How Can I Prevent Scroll Bars from Hiding on macOS Trackpads in WebKit/Blink Browsers?

在 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 触控板用户保持可见。