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

防止 WebKit/Blink 中触控板用户的滚动条消失

macOS 的 WebKit/Blink 浏览器 (Safari/Chrome) 的默认行为长期以来一直是自动向用户隐藏滚动条在 10.7 以上版本 (Mac OS X Lion) 上与触控板交互。这种行为可能特别有问题，因为它删除了指示元素可滚动性的常见视觉提示。

问题陈述

在确保一致可见的滚动条方面出现了困难对于基于 WebKit 的浏览器中的可滚动元素macOS。

解决方案

WebKit 提供了强大的伪元素系统，允许通过使用 -webkit-scrollbar 伪元素对滚动条进行广泛的操作。要始终保持可见的滚动条：

1. 禁用默认外观：利用 -webkit-appearance 属性并将其设置为 none 以覆盖自动隐藏行为。
2. 自定义样式：手动定义滚动条的特定样式首选项，因为删除默认外观可能会导致看不见的滚动条。考虑指定以下属性：

• -webkit-scrollbar-track:背景颜色和边框半径
• -webkit-scrollbar-拇指：边框、背景色、边框radius
• -webkit-scrollbar-width 和 -webkit-scrollbar-height: 水平和垂直滚动条的尺寸分别

示例

以下 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 的浏览器macOS。
• 提供的 CSS 作为示例，可以进行定制以匹配所需的外观。

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