像 Facebook 新的聊天侧边栏一样隐藏滚动条，并在鼠标悬停时显示

Question

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

PS：我正在寻找纯HTML5 / CSS / JavaScript解决方案（没有jQuery或类似工具），无需浏览器支持，应该可以在最新的Chrome中运行而不需要其他任何东西，因为我正在制作仅限Chrome的应用程序。

- Achshar

---

请检查此链接：http://www.dynamicdrive.com/dynamicindex11/facescroll/index.htm，它也可以在IE中使用。 - user1379555

嗨，我看了下面的答案，但是它们都没有解决被点击的弹出框，只有滚动条。当我尝试实现这个解决方案（使用 Twitter Bootstrap）时，由于父 div 上的溢出设置为滚动，弹出框被截断了。你解决了这个问题吗？ - Redwall

Answer 1

这是对Stephen P.的文章的更新，用于制作样式化滚动条。

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

-Mike

- Michael G.

---

是的！这正是Facebook的表现方式！不过我建议您在答案中添加一份快速总结，说明您是如何实现它的。某些人可能需要深入挖掘代码（比我预期的要多得多:P）才能理解它是如何完成的。除此之外，非常好的答案。谢谢！ - Achshar

如果你的答案包含代码并解释了代码是如何实现其功能，我会为它点赞。这可以确保本网站自给自足，不依赖外部链接。链接失效是一种现实，即使 jsfiddle 也不能保证永远与 Stack Overflow 共存。 - Marjan Venema

重点：尽管请求是“不要使用jQuery或类似工具”，但这个使用了jQuery和jQuery-UI的答案被选为最佳答案。虽然这个方法可行，但我是在寻找如何在不使用jQuery的情况下实现这一点，并且现在仍然没有一个好的答案=） - Mike 'Pomax' Kamermans

Answer 2

通常将溢出设置为none，当鼠标悬停时将其更改为overflow-y:scroll。

请参见http://jsfiddle.net/PVZB8/

- Stephen P

---

虽然这在桌面浏览器上非常好用，但不幸的是在移动浏览器（如iPhone上的Safari）中失败了——似乎是因为移动设备并没有真正识别: hover效应。是否有适用于移动设备的解决方法可以与此CSS解决方案一起使用？ - Mo Boho

@MoBoho 在移动设备上，您可以通过拖动屏幕来滚动页面，不需要滚动条。我个人认为，我会选择在第一时间不隐藏溢出内容，或者在移动设备上始终将其设置为overflow: scroll。 - Stephen P

@MoBoho 通常你可以使用 CSS3 媒体查询，这里已经有很多关于此的问题了。或者你也可以使用 JS 移动设备检测技术（我不喜欢浏览器检测）。 - Stephen P

@Wex - 不，它不支持，因为它是基于CSS伪选择器工作的，而_touch_不支持:hover——你要么触摸要么不触摸。如果有一天，触摸屏幕检测到你接近但没有触摸，并因此支持悬停，那么它可能会起作用。然而，OP的问题特别涉及鼠标，而不是移动设备：“如果鼠标移动到（或靠近）滚动条”。 - Stephen P

但是，可能需要注意的一点是，设置overflow: none会阻止移动设备上的滚动功能。 - Wex

Answer 3

这可能不是完全符合问题的答案，因为它要求没有使用jQuery的解决方案。但我通过搜索引擎来到这里，并且我正在使用jQuery。如果你想要一个和Facebook一样顺滑并且外观几乎相同的解决方案，请查看这个：

请参考http://rocha.la/jQuery-slimScroll

- iblue

Answer 4

为了方便未来的访问者并概括其他帖子的回答，我想重新开启这个帖子。我推荐使用jsFancyScroll（感谢Leo Selig！）以及nanoScrollerJS（感谢ip！）因为它们都“保留了操作系统提供的自然滚动体验”。只需尝试搜索一段文本的选择，然后查看各种实现中滚动条的位置即可明白我的意思。

如果您不关心样式滚动条，只想要自动隐藏，Stephen P的答案看起来是最优雅且支持最好的。

- Kevin Jin