如何在 WebKit/Blink 中使滚动条始终对触控板用户可见？

克服 WebKit/Blink 中触控板用户的隐藏滚动条

UIKit/Blink 的默认行为为 MacOS 上的触控板用户隐藏滚动条，可能会妨碍用户相互作用。要解决此问题并确保滚动条可见性一致，请按照以下步骤操作：

1.禁用默认滚动条行为：

使用 -webkit-appearance: none 禁用 WebKit 的默认滚动条外观； ::-webkit-scrollbar 伪元素上的 CSS 属性。

2.定义自定义滚动条样式：

由于删除了默认样式，因此您必须定义自己的样式。以下 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;
}

3.将样式应用于可滚动元素：

将自定义 CSS 应用于可滚动元素，确保滚动条始终可见，无论触控板如何使用。这提供了一致的用户体验并消除了潜在的混乱。

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