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

IT技术 javascript css facebook scrollbar
2021-03-21 17:33:58

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

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

4个回答

这是 Stephen P. 帖子的更新，它具有样式化的滚动条。

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

-麦克风

嗯，是！这正是它在 Facebook 上的表现！尽管我建议您在答案中添加一个关于如何实现它的快速摘要。有人将不得不深入研究代码（这比我预期的要安静得多：P）才能了解它是如何完成的。否则，很好的答案。谢谢！
2021-04-28 17:33:58
坚持点：这个 jQuery+jQuery-UI 答案被选为最佳答案，尽管请求是“没有 jquery 之类的”。虽然这有效，但我发现这篇文章正在寻找如何在没有jQuery 的情况下做到这一点，但现在仍然没有一个好的答案 =)
2021-05-12 17:33:58
如果您的答案实际上包含代码以及它如何实现其功能的解释，我会赞成。保证了本站可以自己的两只脚站立，而不是依赖于外部链接。不幸的是，链接腐烂是一个现实，甚至 jsfiddle 也不能保证永远与堆栈溢出共存。
2021-05-18 17:33:58

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

见http://jsfiddle.net/PVZB8/

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

这可能不是问题的确切答案，因为它需要一个没有 jQuery 的解决方案。但我是通过搜索引擎来到这里的，我使用的是 jQuery。如果你想要一个感觉和facebook一样流畅并且看起来完全一样的解决方案，看看这个：

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

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

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

其它你可能感兴趣的问题
上一篇JavaScript 中用于格式化数字的正则表达式 下一篇从 svg 外部的按钮单击 d3 中的节点