CSS 防止在 WebKit/Blink 中为 MacOS 触控板用户隐藏滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7855590/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink
提问by Facebook Staff are Complicit
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.
自 10.7 (Mac OS X Lion) 起，MacOS 上的 WebKit/Blink (Safari/Chrome) 默认行为是在触控板用户不使用滚动条时隐藏滚动条。这可能会令人困惑；滚动条通常是元素可滚动的唯一视觉提示。
Example (jsfiddle)
示例（jsfiddle）
HTML<div class="frame">
Foo<br />
Bar<br />
Baz<br />
Help I'm trapped in an HTML factory!
</div>
.frame {
overflow-y: auto;
border: 1px solid black;
height: 3em;
width: 10em;
line-height: 1em;
}?
How can I force a scroll bar to always be displayed on a scrollable element in WebKit?
如何强制滚动条始终显示在 WebKit 中的可滚动元素上？
回答by Facebook Staff are Complicit
The appearance of the scroll bars can be controlled with WebKit's -webkit-scrollbarpseudo-elements?[blog]. You can disable the default appearance and behaviour by setting -webkit-appearance?[docs]to none.
滚动条的外观可以用WebKit的-webkit-scrollbar伪元素来控制吗？[博客]。您可以通过设置禁用默认外观和行为-webkit-appearance？[文档]到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:
因为您要删除默认样式，所以您还需要自己指定样式，否则滚动条将永远不会显示。以下 CSS 重新创建了隐藏滚动条的外观：
Example (jsfiddle)
示例（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;
}
回答by Blaise
For a one-page web application where I add scrollable sections dynamically, I trigger OSX's scrollbars by programmatically scrolling one pixel down and back up:
对于我动态添加可滚动部分的一页 Web 应用程序，我通过以编程方式向下滚动一个像素并向上滚动来触发 OSX 的滚动条：
// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;
// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);
This triggers the visual cue fading in and out.
这会触发淡入淡出的视觉提示。
回答by Alex Banman
Here is a shorter bit of code that reenables scroll bars across your entire website. I'm not sure if it's much different than the current most popular answer but here it is:
这是一段较短的代码，可以在整个网站上重新启用滚动条。我不确定它是否与当前最受欢迎的答案有很大不同，但它是：
::-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);
}
Found at this link: http://simurai.com/blog/2011/07/26/webkit-scrollbar
在此链接中找到：http: //simurai.com/blog/2011/07/26/webkit-scrollbar
回答by Chris M. Welsh
Browser scrollbars don't work at all on iPhone/iPad. At work we are using custom JavaScript scrollbars like jScrollPane to provide a consistent cross-browser UI: http://jscrollpane.kelvinluck.com/
浏览器滚动条在 iPhone/iPad 上根本不起作用。在工作中，我们使用像 jScrollPane 这样的自定义 JavaScript 滚动条来提供一致的跨浏览器 UI：http: //jscrollpane.kelvinluck.com/
It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.
它对我来说非常有效 - 您可以制作一些适合您网站设计的非常漂亮的自定义滚动条。
回答by user976647
Another good way of dealing with Lion's hidden scroll bars is to display a prompt to scroll down. It doesn't work with small scroll areas such as text fields but well with large scroll areas and keeps the overall style of the site. One site doing this is http://versusio.com, just check this example page and wait 1.5 seconds to see the prompt:
另一个处理 Lion 隐藏滚动条的好方法是显示向下滚动的提示。它不适用于文本字段等小滚动区域，但适用于大滚动区域并保持站点的整体风格。这样做的一个站点是http://versusio.com，只需检查此示例页面并等待 1.5 秒即可看到提示：
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
The implementation isn't hard but you have to take care, that you don't display the prompt when the user has already scrolled.
实现并不难，但您必须注意，当用户已经滚动时，您不会显示提示。
You need jQuery + Underscore and
你需要 jQuery + Underscore 和
$(window).scrollto check if the user already scrolled by himself,
$(window).scroll检查用户是否已经自己滚动，
_.delay()to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive
_.delay()在显示提示之前触发延迟 - 提示不应过于突兀
$('#prompt_div').fadeIn('slow')to fade in your prompt and of course
$('#prompt_div').fadeIn('slow')淡入你的提示，当然
$('#prompt_div').fadeOut('slow')to fade out when the user scrolled after he saw the prompt
$('#prompt_div').fadeOut('slow')当用户在看到提示后滚动时淡出
In addition, you can bind Google Analytics events to track user's scrolling behavior.
此外，您可以绑定 Google Analytics 事件来跟踪用户的滚动行为。
