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

Question

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

它只是CSS或一些JavaScript吗？

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

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

Answer 1

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

我是关于学习经验的 - 但是在你学会了它的工作原理后,我建议你使用一个库(其中有很多)来做.这是"不要重塑"事物之一......

编辑 如果你想完全跳过学习阶段,jassi9911发布了一个jQuery插件的链接,这个插件很简单易用.好东西.

Answer 2

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

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

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

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

我强烈建议使用TinyScrollbar这样的插件,这些插件会带来可怕的性能问题!

Answer 3

如果你正在寻找像滚动条这样的Facebook,那么我强烈建议你看一下这个:

http://rocha.la/jQuery-slimScroll