Css 防止WebKit/Blink中MacOS trackpad用户隐藏滚动条

WebKit/Blink（Safari/Chrome）自10.7（MacOSX Lion）以来在MacOS上的默认行为是在触摸板用户不使用时隐藏滚动条；滚动条通常是元素可滚动的唯一视觉提示

例（） HTML WebKit（Chrome）屏幕截图

普雷斯托（歌剧）截图

---

---

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

滚动条的外观可以通过WebKit的

-WebKit滚动条

伪元素[]来控制。通过将

-webkit-appearance

[]设置为

none

，可以禁用默认外观和行为

由于要删除默认样式，还需要自己指定样式，否则滚动条将永远不会显示。以下CSS重新创建隐藏滚动条的外观：

例（） CSS WebKit（Chrome）屏幕截图

---

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

实现并不困难，但您必须注意，当用户已经滚动时，您不会显示提示

您需要jQuery+下划线和

$（窗口）。滚动

要检查用户是否已经自己滚动

\uu.delay（）

要在显示提示之前触发延迟，提示不应太突兀

$（'prompt_div'）.fadeIn（'slow'）

在你的提示下消失，当然

$（'prompt_div'）.fadeOut（'slow'）

当用户看到提示后滚动时淡出

---

此外，您可以绑定Google Analytics事件来跟踪用户的滚动行为。

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

---

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

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

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

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

---

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

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

::-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);
}

---

可在此链接找到：

对于强制macosx狮子滚动条，此处描述的技巧不适用于此技术：。不过不麻烦——因为我们在这里显式设置了尺寸，所以可以直接访问它们。请注意，您还可以使用以下命令自定义滚动条的轨迹/背景：

。frame:：-webkit scrollbar track{background color:#FFF；border radius:8px；}

注意webkit滚动条样式在iOS 7（可能还有6）中不起作用.有一件事要提的是，在我的测试和测试中，你似乎不能像iOS那样拥有一个总是在滚动条上的功能和人们习惯于滚动的势头。执行此操作导致我的自定义滚动条消失。最近没有验证这一点，但我在引用此解决方案的CSS中发现了此注释：“注意，这将显示OS X样式的滚动条，例如在Windows上的Chrome中。”您是否尝试过溢出：滚动？这曾经在Chrome中工作。它应该强制滚动条始终显示。请注意，这也是Mac OS X上Firefox的一个问题。伙计，我讨厌网站干扰我系统和用户代理上的UI。

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

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

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

::-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);
}