防止WebKit / Blink中的MacOS轨迹板用户隐藏滚动条
Mac OS X自10.7（Mac OS X Lion）以来，WebKit / Blink的（Safari / Chrome）默认行为是在不使用轨迹板用户时隐藏滚动条。 这可能会令人困惑 ; 滚动条通常是元素可滚动的唯一可视提示。
示例（ 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的可滚动元素？
滚动条的外观可以通过WebKit的-webkit-scrollbar伪元素[ blog ]来控制 。 您可以通过将-webkit-appearance [ docs ]设置为none来禁用默认外观和行为。
因为您要删除默认样式，您还需要自己指定样式，否则滚动条将不会显示。 以下CSS重新创build隐藏滚动条的外观：
示例（ 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）截图
对于dynamic添加可滚动部分的单页Web应用程序，通过以编程方式向下滚动一个像素并备份，触发OSX的滚动条：
// Plain JS: var el = document.getElementById('scrollable-section'); el.scrollTop = 1; el.scrollTop = 0; // jQuery: $('#scrollable-section').scrollTop(1).scrollTop(0);
这触发视觉提示淡入和淡出。
浏览器滚动条在iPhone / iPad上完全不起作用。 在工作中，我们使用像jScrollPane这样的自定义JavaScript滚动条来提供一致的跨浏览器UI： http : //jscrollpane.kelvinluck.com/
它对我来说工作得非常好 – 你可以制作一些非常漂亮的自定义滚动条，以适应你网站的devise。
处理狮子的隐藏滚动条的另一个好方法是显示提示向下滚动。 它不适用于诸如文本字段之类的小滚动区域，而且具有大滚动区域并保持网站的整体风格。 一个网站这样做是http://versusio.com ，只是检查这个例子页面，等待1.5秒，看到提示：
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
实现并不难，但你必须小心，当用户已经滚动时，不显示提示。
你需要jQuery + Underscore和
$(window).scroll检查用户是否已经自己滚动，
_.delay()在显示提示之前触发一个延迟 – 提示不应该是突兀的
$('#prompt_div').fadeIn('slow')淡入你的提示，当然
$('#prompt_div').fadeOut('slow')在用户看到提示后滚动时淡出
另外，您可以绑定Google Analytics事件来跟踪用户的滚动行为。
这是一小段代码，可以在整个网站上重新启用滚动条。 我不确定是否与当前最stream行的答案有很大的不同，但是这里是：
::-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); }
在此链接中find： http : //simurai.com/blog/2011/07/26/webkit-scrollbar
