防止在 WebKit/Blink 中为 MacOS 触控板用户隐藏滚动条

问题描述

WebKit/Blink (Safari/Chrome) 自 10.7 (Mac OS X Lion) 起在 MacOS 上的默认行为是在触控板用户不使用滚动条时隐藏滚动条.].您可以通过设置 -webkit-appearance 到 none.

因为您要删除默认样式，所以您还需要自己指定样式，否则滚动条将永远不会显示.以下 CSS 重新创建了隐藏滚动条的外观:

示例(jsfiddle)

CSS

.frame::-webkit-scrollbar {-webkit 外观:无；}.frame::-webkit-scrollbar:vertical {宽度:11px；}.frame::-webkit-scrollbar:horizo​​ntal {高度:11px；}.frame::-webkit-scrollbar-thumb {边框半径:8px；边框:2px纯白色；/* 应该匹配背景，不能透明 */背景颜色:rgba(0, 0, 0, .5);}.frame::-webkit-scrollbar-track {背景色:#fff;边框半径:8px；}

WebKit (Chrome) 屏幕截图

WebKit/Blink's (Safari/Chrome) default behaviour on MacOS since 10.7 (Mac OS X Lion) is to hide scroll bars from trackpad users when they're not in use. This can be confusing; the scroll bar is often the only visual cue that an element is scrollable.

Example (jsfiddle)

HTML

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory!
</div>

CSS

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

WebKit (Chrome) ScreenshotPresto (Opera) Screenshot

---

How can I force a scroll bar to always be displayed on a scrollable element in WebKit?

解决方案

The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbar pseudo-elements . You can disable the default appearance and behaviour by setting -webkit-appearance  to none.

Because you're removing the default style, you'll also need to specify the style yourself or the scroll bar will never show up. The following CSS recreates the appearance of the hiding scroll bars:

Example (jsfiddle)

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 (Chrome) Screenshot

这篇关于防止在 WebKit/Blink 中为 MacOS 触控板用户隐藏滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！