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

Question

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

它仅使用了CSS，还是还需要一些JavaScript？

如果是的话，能否提供代码的大致样式？

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

- Jerome Ansia

---

@kapa 不是关于FB风格的重复问题。 - Jerome Ansia

fakeScroll非常轻量级和高效 - http://yaireo.github.io/fakescroll/ - vsync

Answer 1

这个链接可以帮助您开始了解。简单地说，一个被样式化成滚动条的 div 元素被用于捕获鼠标点击和拖动事件。与这些事件绑定的方法会滚动另一个设置为固定高度并且通常具有 overflow:scroll 样式规则的 div 中的内容（样式规则可能有一些变体，但是您应该明白了）。

我很注重学习经验, 但在您了解如何编写代码之后，我建议使用库（有许多库可以使用），来完成相关功能。这是一种“不要重复发明轮子”的做法...

- Daniel Szabo

Answer 2

Facebook使用了一种非常巧妙的技术，我在我的滚动条插件jsFancyScroll中描述过：

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

欢迎在您的项目中使用我的插件：:)

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

我强烈推荐它，而不是像TinyScrollbar这样的插件，因为它会带来可怕的性能问题！

- Leo Selig

---

这似乎是目前没有维护，想要使用它但是Github上的问题仍然未解决。如果这个插件得到更新，请告诉我们。 - Ethan

@Ethan 我也很想知道，但公开问题实在太愚蠢了。 - Pakman

@Pakman 确实，而且不维护通常对未来不利，我们将不得不在某个时候放弃它并寻找替代方案。 - Ethan

抱歉回复晚了，该项目确实不再维护。 - Leo Selig

Answer 3

如果您正在寻找类似于Facebook的滚动条，那么我强烈推荐您查看这个：

http://rocha.la/jQuery-slimScroll

。

- Mahdi

---

400行代码用来实现这么简单的功能有些“臃肿” ;) - vsync

@vsync 尝试使用更少的代码行实现相同的功能和浏览器支持，我相信开源社区会非常感激的！;) - Mahdi

@Mahdi - 我用了100行代码（4kb）完成了它，同时使其性能更好。 slimScroll不允许您使用鼠标中键滚动- 这是一个巨大的无障碍问题。http://yaireo.github.io/fakescroll/ - vsync

@Mahdi - 谢谢！你可以查看我的Github，那里有许多其他不错的项目。 - vsync

@DragosPodaru - IE有很多版本。具体是哪些？就我个人而言，我已经好几年没有为IE开发了。 - vsync

Answer 4

我通过在可滚动内容的div旁边添加另一个div解决了这个问题。它的高度设置为曲线边框的半径。如果您有想要挤到底部的内容或者想让文本流入这个新div中等设计问题，那么就会有设计问题，但是对于我的UI，这个薄div没有问题。

真正的诀窍是拥有以下结构：

<div class="window">
 <div class="title">Some title text</div>
 <div class="content">Main content area</div>
 <div class="footer"></div>
</div>

重要的CSS亮点：

• 你的CSS将定义内容区域的高度和溢出，以允许滚动条出现。
• window类得到与标题和页脚相同直径的圆角
• 如果需要阴影，则仅给予窗口类
• 页脚div的高度与底部角的半径相同

以下是效果图：

- kirasglimmer