使用 WebKit/Blink 浏览器时如何防止 Mac 触控板上的滚动条消失？-css教程-PHP中文网

使用 WebKit/Blink 浏览器时如何防止 Mac 触控板上的滚动条消失？

Patricia Arquette

发布： 2024-12-08 10:26:11

原创

266 人浏览过

How Can I Prevent Scroll Bars from Disappearing on My Mac Trackpad When Using WebKit/Blink Browsers?

防止滚动条消失：WebKit/Blink 中 Mac 触控板用户的解决方案

问题：

使用 Mac OS X Lion (10.7) 的 macOS 用户稍后在 WebKit/Blink 浏览器（如 Safari 和 Chrome）中使用触控板时可能会遇到隐藏的滚动条。这种行为可能会导致混乱，因为滚动条提供了元素可滚动的基本视觉提示。

解决方案：

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;
}

登录后复制

结论：

通过实现此 CSS 样式，我们可以确保滚动条在 WebKit/Blink 浏览器中对 Mac 触控板用户保持可见，提供一致且直观的滚动体验。

以上是使用 WebKit/Blink 浏览器时如何防止 Mac 触控板上的滚动条消失？的详细内容。更多信息请关注PHP中文网其他相关文章！