如何确保 WebKit/Blink 浏览器中的触控板用户在 macOS 上滚动条可见？

确保 WebKit/Blink 中 MacOS 触控板用户的滚动条可见性

在 Safari 和 Chrome 等 WebKit/Blink 浏览器中，MacOS 上的滚动条自 OS X Lion (10.7) 以来，出现了奇怪的行为。使用触控板时，滚动条会自动隐藏，直到用户的光标悬停在可滚动区域上。虽然这看起来像是极简风格，但这种行为可能会导致混乱，尤其是当滚动条充当可滚动元素的唯一指示器时。

解决方案：利用 WebKit 的伪元素

为了纠正这个问题并强制滚动条保持可见，我们可以通过 WebKit 的 -webkit-scrollbar 来操纵它们的外观伪元素。通过使用 -webkit-appearance: none 禁用默认外观和行为，我们可以控制滚动条的样式并确保其可见性：

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

但是，由于我们要覆盖默认样式，我们还需要我们自己定义滚动条的外观。以下 CSS 重新创建半透明隐藏滚动​​条：

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

通过这些修改，可滚动元素上的滚动条将在 MacOS 上保持可见，无论触控板使用情况或光标位置如何，从而提供更高的清晰度和易用性为用户导航。

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