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

Posted 2023-02-21

技术标签:

【中文标题】防止在 WebKit/Blink 中为 MacOS 触控板用户隐藏滚动条【英文标题】：Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink 【发布时间】：2011-12-12 22:11:57 【问题描述】：

WebKit/Blink (Safari/Chrome) 自 10.7 (Mac OS X Lion) 以来在 MacOS 上的默认行为是在触控板用户不使用时隐藏滚动条。 This can be confusing;滚动条通常是元素可滚动的唯一视觉提示。

示例 (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) 截图

Presto (Opera) 截图

如何强制滚动条始终显示在 WebKit 中的可滚动元素上？

【问题讨论】：

您是否尝试过溢出：滚动？这曾经在 Chrome 中工作。它应该强制滚动条始终显示。请注意，这在 Mac OS X 上的 Firefox 中也是一个问题。伙计，我讨厌网站在 my 系统和用户代理上的 UI 混乱。 【参考方案1】：

这是一段较短的代码，可在您的整个网站上重新启用滚动条。我不确定它是否与当前最流行的答案有很大不同，但它是：

::-webkit-scrollbar 
    -webkit-appearance: none;
    width: 7px;

::-webkit-scrollbar-thumb 
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);

在此链接中找到：http://simurai.com/blog/2011/07/26/webkit-scrollbar

【讨论】：

【参考方案2】：

对于我动态添加可滚动部分的单页 Web 应用程序，我通过以编程方式向下和向后滚动一个像素来触发 OSX 的滚动条：

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

这会触发视觉提示淡入淡出。

【讨论】：

【参考方案3】：

滚动条的外观可以通过 WebKit 的 -webkit-scrollbar 伪元素 ^[blog] 控制。您可以通过将 -webkit-appearance^[docs] 设置为 none 来禁用默认外观和行为。

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

示例 (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) 截图

【讨论】：

对于强制 macosx lion 滚动条，此处描述的技巧不适用于此技术：***.com/a/3417992/62255。不过没关系——因为我们在这里明确设置了尺寸，所以我们可以直接访问它们。请注意，您还可以通过以下方式自定义滚动条的轨道/背景：.frame::-webkit-scrollbar-track background-color: #FFF; border-radius: 8px; 注意 webkit 滚动条样式在 ios 7（可能还有 6）中不起作用。要提一提的是，在我的测试和really old comment by someone else 中，您似乎无法拥有始终在线的滚动条和人们习惯于使用 iOS 的类似动量的滚动。执行momentum-scrolling CSS 导致我的自定义滚动条消失。最近没有对此进行验证，但我在引用此解决方案的 CSS 中发现了此注释：“请注意，这将显示 OS X 样式的滚动条，例如在 Windows 上的 Chrome 中。”【参考方案4】：

浏览器滚动条在 iPhone/iPad 上根本不起作用。在工作中，我们使用自定义 javascript 滚动条（如 jScrollPane）来提供一致的跨浏览器 UI：http://jscrollpane.kelvinluck.com/

它对我来说效果很好 - 您可以制作一些非常漂亮的自定义滚动条，以适合您的网站设计。

【讨论】：

【参考方案5】：

另一个处理 Lion 隐藏滚动条的好方法是显示向下滚动的提示。它不适用于文本字段等小滚动区域，但适用于大滚动区域并保持网站的整体风格。这样做的一个站点是http://versusio.com，只需检查此示例页面并等待 1.5 秒即可看到提示：

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb

实现并不难，但您必须小心，当用户已经滚动时，您不会显示提示。

你需要 jQuery + 下划线和

$(window).scroll 检查用户是否已经自己滚动，

_.delay() 在显示提示之前触发延迟 - 提示不应过于突兀

$('#prompt_div').fadeIn('slow') 淡入你的提示，当然

$('#prompt_div').fadeOut('slow') 当用户看到提示后滚动时淡出