隐藏滚动条,并显示在hover如Facebook的新聊天侧边栏

Facebook只是更新了聊天(再次),现在一个新的固定侧栏停留在屏幕左侧。 当内容溢出时,会出现一个滚动条,但只有在用鼠标滚轮滚动或鼠标移过(或靠近)滚动条时才会出现。 如果鼠标没有结束,它会消失。 对窗口对象(比如聊天本身)是非常有用的。 那么它是怎样工作的?

PS我正在寻找一个纯html5 / css / javascript解决scheme(没有jquery或这样的),没有必要的浏览器支持,应该工作在最新的铬,没有更多,因为我只是一个应用程序铬。

这里是一个更新斯蒂芬体育的职位有一个风格的滚动条。

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

-麦克风

你将溢出设置为none ,并将其更改为overflow-y: scrollhover。

http://jsfiddle.net/PVZB8/

这可能不是问题的确切答案,因为它被要求提供一个没有jQuery的解决scheme。 但是,我通过search引擎来到这里,并使用jQuery。 如果你想要一个像Facebook一样顺畅的解决scheme,请看看这个:

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

你也可能想看看纳米卷轴 。

我想重新启动这个线程为未来的访客的利益,并基本上总结了这个线程的其他答案。 我更喜欢jsFancyScroll (感谢Leo Selig !)以及nanoScrollerJS (感谢ip !),因为它们都“保留了操作系统提供的自然滚动体验”。 只要尝试search文本的select,然后在各种实现中查看滚动条的位置,看看我的意思。

如果你不喜欢滚动条的样式,只是想自动隐藏, Stephen P的答案看起来是最优雅和最好的支持。