隐藏滚动条并显示像facebook的新聊天边栏一样悬停

Question

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

PS我正在寻找一个纯粹的html5 / css / javascript解决方案（没有jquery等），没有必要的浏览器支持，应该使用最新的chrome，仅此而已，因为我只为chrome制作应用程序。

Answer 1

这是Stephen P.的帖子更新，有一个风格滚动条。

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

-Mike

Answer 2

您可以将溢出设置为none，并在悬停时将其更改为overflow-y: scroll。

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

Answer 3

这可能不是问题的确切答案，因为它要求没有jQuery的解决方案。但我通过搜索引擎来到这里，我正在使用jQuery。如果你想要一个让人感觉顺畅的解决方案，并且看起来与在facebook中完全相同，请看一下：

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

Answer 4

您可能还想查看nano scroller。

Answer 5

我想重振这个主题以造福未来的访问者，并基本上总结了这个主题的其他答案。我更喜欢jsFancyScroll（感谢Leo Selig！）以及nanoScrollerJS（感谢ip！）因为它们“都保留了操作系统提供的自然滚动体验”。只是尝试搜索一系列文本，然后查看各种实现中滚动条的位置，看看我的意思。

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