blocks|key|1749678|text|处理Lion隐藏滚动条的另一个好方法是显示向下滚动的提示。它不适用于小的滚动区域，如文本字段，但适用于大的滚动区域，并保持网站的整体风格。这样做的一个站点是http://versusio.com，只需查看此示例页面并等待1.5秒即可看到提示：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1749679|http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb|1749680|实现起来并不难，但你必须注意，当用户已经滚动时，你不会显示提示。|1749681|您需要jQuery+%2B下划线和|1749682|$(window).scroll检查用户是否已经自己滚动，|style|CODE|1749683|在显示提示符之前触发延迟的_.delay()+--提示符不应该太明显|1749684|$('#prompt_div').fadeIn('slow')来淡出提示符，当然还有|1749685|当用户看到提示后滚动时淡出的$('#prompt_div').fadeOut('slow')|1749686|此外，您还可以绑定Google+Analytics事件来跟踪用户的滚动行为。|1749687|entityMap|0|LINK|mutability|MUTABLE|url|http://versusio.com/|1^0|26|J|0|0|0|20|1|0|0|0|0|G|0|D|9|0|0|V|0|E|W|0|0^^$0|@$1|2|3|4|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|D|3|E|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]]|C|$]]|$1|F|3|G|5|6|7|1C|8|@]|9|@]|C|$]]|$1|H|3|I|5|6|7|1D|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|1E|8|@$A|1F|B|1G|L|M]]|9|@]|C|$]]|$1|N|3|O|5|6|7|1H|8|@$A|1I|B|1J|L|M]]|9|@]|C|$]]|$1|P|3|Q|5|6|7|1K|8|@$A|1L|B|1M|L|M]]|9|@]|C|$]]|$1|R|3|S|5|6|7|1N|8|@$A|1O|B|1P|L|M]]|9|@]|C|$]]|$1|T|3|U|5|6|7|1Q|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|1R|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|E]]]]

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 <a href="http://versusio.com" rel="nofollow">http://versusio.com</a>, just check this example page and wait 1.5 seconds to see the prompt:

<a href="http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb" rel="nofollow">http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb</a>

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

<code>$(window).scroll</code>
to check if the user already scrolled by himself, 

<code>_.delay()</code>
to trigger a delay before you display the prompt -- the prompt shouldn't be to obtrusive

<code>$('#prompt_div').fadeIn('slow')</code>
to fade in your prompt and of course

<code>$('#prompt_div').fadeOut('slow')</code>
to fade out when the user scrolled after he saw the prompt

In addition, you can bind Google Analytics events to track user's scrolling behavior.

blocks|key|1963109|text|浏览器滚动条在iPhone/iPad上完全不起作用。在工作中，我们使用像jScrollPane这样的自定义JavaScript滚动条来提供一致的跨浏览器UI：http://jscrollpane.kelvinluck.com/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1963110|它对我来说工作得很好-你可以制作一些非常漂亮的自定义滚动条来适合你网站的设计。|1963111|entityMap|0|LINK|mutability|MUTABLE|url|http://jscrollpane.kelvinluck.com/^0|27|Y|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]]|C|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]]]

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: <a href="http://jscrollpane.kelvinluck.com/" rel="nofollow">http://jscrollpane.kelvinluck.com/</a>

It works very well for me - you can make some really beautiful custom scrollbars that fit the design of your site.

blocks|key|1749762|text|对于一个只有一页的web应用程序，我动态地添加可滚动的部分，我通过编程向下滚动一个像素并向上滚动来触发OSX的滚动条：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1749763|//+Plain+JS:
var+el+=+document.getElementById('scrollable-section');
el.scrollTop+=+1;
el.scrollTop+=+0;

//+jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);|code-block|syntax|javascript|1749764|这会触发视觉提示淡入淡出。|1749765|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

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:

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

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

This triggers the visual cue fading in and out.

blocks|key|1749792|text|下面是一小段代码，可以在整个网站上重新启用滚动条。我不确定它是否与当前最流行的答案有很大不同，但它是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1749793|::-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);
}|code-block|syntax|javascript|1749794|可通过以下链接找到：http://simurai.com/blog/2011/07/26/webkit-scrollbar|offset|length|1749795|entityMap|0|LINK|mutability|MUTABLE|url|http://simurai.com/blog/2011/07/26/webkit-scrollbar^0|0|0|A|1F|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

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:

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

Found at this link: <a href="http://simurai.com/blog/2011/07/26/webkit-scrollbar" rel="noreferrer">http://simurai.com/blog/2011/07/26/webkit-scrollbar</a>

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. <a href="https://stackoverflow.com/q/6818466" title="a related ranty &quot;question&quot;">This can be confusing</a>; the scroll bar is often the only visual cue that an element is scrollable.

<h3>Example (<a href="https://jsfiddle.net/JBXqQ/7/" rel="noreferrer">jsfiddle</a>)</h3>

HTML

<pre><code>&lt;div class="frame"&gt;
 Foo&lt;br /&gt;
 Bar&lt;br /&gt;
 Baz&lt;br /&gt;
 Help I'm trapped in an HTML factory! 
&lt;/div&gt;
</code></pre>

CSS

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

WebKit (Chrome) Screenshot

<img src="https://i.stack.imgur.com/WQpxP.png" alt="screenshot of a div with no visible scroll bar">

Presto (Opera) Screenshot

<img src="https://i.stack.imgur.com/vXZAD.png" alt="screenshot of a div with a visible scroll bar"> <img src="https://i.stack.imgur.com/D5VFw.png" alt="">

<hr>

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

Preventing scroll bars from being hidden for MacOS trackpad users in WebKit/Blink

Presto

jQuery

MacOS

WebKit/Blink (Safari/Chrome)从10.7 ( MacOS )开始在MacOS上的默认行为是在触控板用户不使用时隐藏滚动条。；滚动条通常是元素可滚动的唯一视觉提示。示例()HTML<div class="frame"> Foo Bar Baz ...

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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