隐藏滚动条并像facebook的新聊天侧边栏一样在悬停时显示[关闭]答案

【问题标题】：hide scrollbar and show on hover like facebook's new chat sidebar [closed]隐藏滚动条并像facebook的新聊天侧边栏一样在悬停时显示[关闭]
【发布时间】：2011-10-30 19:27:31
【问题描述】：

Facebook 刚刚更新了聊天（又一次），现在一个新的固定侧边栏停留在屏幕左侧。当其内容溢出时，会出现一个滚动条，但前提是使用鼠标滚轮滚动或鼠标移到（或靠近）滚动条。如果鼠标不在它上面，它会淡出。它对于事物窗口对象（例如聊天本身）非常有用。那么它是如何工作的呢？

PS 我正在寻找一个纯 html5/css/javascript 解决方案（不需要 jquery 等），不需要浏览器支持，应该可以在最新的 chrome 中运行，仅此而已，因为我只为 chrome 制作应用程序。

【问题讨论】：

检查一下：dynamicdrive.com/dynamicindex11/facescroll/index.htm 也适用于 IE..
嗨，我查看了下面的答案，但没有一个解决被点击的弹出框，只有滚动条。当我尝试实现该解决方案（使用 twitter 引导程序）时，弹出框会被截断，因为父 div 上的溢出设置为滚动。你搞定了吗？

标签： javascript css facebook scrollbar

【解决方案1】：

这是对 Stephen P. 帖子的更新，其中包含样式滚动条。

http://jsfiddle.net/PVZB8/139/

-迈克

【讨论】：

好吧！这正是它在 Facebook 上的表现！尽管我建议您在答案中添加一个关于如何实现它的快速摘要。有人必须深入研究代码（这比我预期的要安静得多：P）才能了解它是如何完成的。否则，很好的答案。谢谢！
如果您的答案实际上包含代码以及它如何实现其功能的解释，我会赞成。它确保该站点可以stand on its own two feet 而不是依赖外部链接。不幸的是，链接腐烂已成为现实，甚至 jsfiddle 也不能保证永远与堆栈溢出共存。
关键点：这个 jQuery+jQuery-UI 答案被选为最佳答案，尽管该请求是针对“没有 jquery 之类的”。虽然这可行，但我发现这篇文章正在寻找如何在 without jQuery 的情况下执行此操作，但现在仍然没有一个好的答案 =)

【解决方案2】：

您通常将溢出设置为none，并将其更改为在悬停时使用overflow-y: scroll。

见http://jsfiddle.net/PVZB8/

【讨论】：

只有当鼠标移到（或非常靠近）滚动条而不是整个元素时才会出现滚动条..
@Achshar - 真的吗？在fiddle I created 上，当我将鼠标移动到从任何一侧接近的 div 上的任何位置时，会出现滚动条。（使用 Firefox 3.6.12 和 5.x）你用什么浏览器试试？
哦，是的.. 在我的#2 评论中，我在谈论 Facebook.. 这就是 Facebook 上发生的事情。我认为评论有点混乱。在 Facebook 上，滚动条仅在鼠标靠近滚动条时出现，而不是在鼠标进入元素时出现。（这是有道理的，否则滚动条的持续和突然出现可能会很烦人）。它不仅会出现，还会消失。
淡化可以通过CSS3 转换（极少数浏览器支持）或使用Javascript来完成。例如，jQuery 内置了fading effects（请参阅this SO question 了解更多信息）。我相信FB有他们自己的，但我不做FB编程，所以我不能肯定地告诉你。
我熟悉 css3 转换.. 正如我所说，我不需要担心浏览器支持，因为我的应用程序只有 chrome。但问题是How do i make the transition affect only the scroll bar and not it's content。如果可以回答上一个问题，则可以处理另一个问题（仅在鼠标靠近滚动条时显示）。所以这是最后一件事。

【解决方案3】：

这可能不是问题的确切答案，因为它被要求提供没有 jQuery 的解决方案。但我是通过搜索引擎来到这里的，我使用的是 jQuery。如果您想要一个与 facebook 一样流畅且 看起来与 facebook 完全相同的解决方案，请查看以下内容：

见http://rocha.la/jQuery-slimScroll

【讨论】：

【解决方案4】：

为了将来的访问者的利益，我想恢复这个线程，并基本上总结了这个线程的其他答案。我更喜欢jsFancyScroll（感谢Leo Selig！）以及nanoScrollerJS（感谢ip！），因为它们都“保留了操作系统提供的自然滚动体验”。只需尝试搜索选定的文本，然后查看各种实现中滚动条的位置即可了解我的意思。

如果您不关心滚动条的样式而只是希望它自动隐藏，Stephen P 的答案看起来是最优雅和最受支持的。

【讨论】：