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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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