如何在 div 上创建自定义滚动条（Facebook 样式）

Question

我想知道 Facebook 上的自定义滚动条是如何制作的。

它只是css还是一些javascript？

如果是，我可以知道代码是什么样的吗？

这个问题特定于 Facebook 滚动条样式，而不是如何简单地拥有自定义滚动条

原文由 Jerome Ansia 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这个链接 应该让你开始。长话短说，一个看起来像滚动条的 div 用于捕获点击和拖动事件。连接到这些事件的是滚动另一个 div 的内容的方法，该 div 设置为任意高度，并且通常具有溢出的 css 规则：滚动（css 规则有变体，但你明白了）。

我只关心学习经验——但是在你了解了它的工作原理之后，我建议使用一个库（其中有很多）来完成它。这是那些“不要重新发明”的事情之一……

原文由 Daniel Szabo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

Facebook 使用了我在滚动条插件 jsFancyScroll 的上下文中描述的一种非常聪明的技术：

滚动内容实际上是由浏览器滚动机制本地滚动的，而本地滚动条通过使用溢出定义隐藏，自定义滚动条通过双向事件监听保持同步。

随意将我的插件用于您的项目：:)

https://github.com/leoselig/jsFancyScroll/

我强烈推荐它而不是带有可怕性能问题的 TinyScrollbar 之类的插件！

原文由 Leo Selig 发布，翻译遵循 CC BY-SA 3.0 许可协议