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

Question

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

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

Answer 1

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

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

-麦克风

Answer 2

您将溢出设置为none正常并将其更改为overflow-y: scroll悬停.

见http://jsfiddle.net/PVZB8/

Answer 3

这可能不是问题的确切答案,因为它要求没有jQuery的解决方案.但我通过搜索引擎来到这里,我正在使用jQuery.如果你想要一个感觉像在facebook中一样流畅的解决方案,请看看这个:

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

Answer 4

您可能还想查看nano滚动条.

Answer 5

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

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