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

Question

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

它只是css还是一些javascript？

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

此问题特定于Facebook滚动条样式，而不是如何简单地使用自定义滚动条

Answer 1

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

我是关于学习经历的全部 - 但是在你学会了它的工作原理之后，我建议你使用一个库（其中有许多库）。这是“不要重塑”事物之一......

Answer 2

它是javascript和css的组合

http://jscrollpane.kelvinluck.com/basic.html

Answer 3

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

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

随意为我的项目使用我的插件::）

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

我强烈建议使用TinyScrollbar这样的插件，这些插件会出现严重的性能问题！

Answer 4

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

http://rocha.la/jQuery-slimScroll

Answer 5

我通过添加另一个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会定义具有高度和溢出的内容区域，以允许滚动条出现。
• 窗口类与标题和页脚的直径角相同
• 如果需要，投影仅提供给窗口类
• 页脚div的高度与底角的半径相同

这就是看起来的样子：