我想知道Facebook上的自定义滚动条是如何制作的。
它仅使用了CSS,还是还需要一些JavaScript?
如果是的话,能否提供代码的大致样式?
此问题特定于Facebook滚动条样式,而不是如何简单地拥有一个自定义滚动条。
我想知道Facebook上的自定义滚动条是如何制作的。
它仅使用了CSS,还是还需要一些JavaScript?
如果是的话,能否提供代码的大致样式?
此问题特定于Facebook滚动条样式,而不是如何简单地拥有一个自定义滚动条。
这个链接可以帮助您开始了解。简单地说,一个被样式化成滚动条的 div 元素被用于捕获鼠标点击和拖动事件。与这些事件绑定的方法会滚动另一个设置为固定高度并且通常具有 overflow:scroll 样式规则的 div 中的内容(样式规则可能有一些变体,但是您应该明白了)。
我很注重学习经验, 但在您了解如何编写代码之后,我建议使用库(有许多库可以使用),来完成相关功能。这是一种“不要重复发明轮子”的做法...
Facebook使用了一种非常巧妙的技术,我在我的滚动条插件jsFancyScroll中描述过:
滚动的内容实际上是由浏览器滚动机制本地滚动的,同时使用溢出定义隐藏本机滚动条,通过双向事件监听来保持自定义滚动条同步。
欢迎在您的项目中使用我的插件::)
https://github.com/leoselig/jsFancyScroll/
我强烈推荐它,而不是像TinyScrollbar这样的插件,因为它会带来可怕的性能问题!
<div class="window">
<div class="title">Some title text</div>
<div class="content">Main content area</div>
<div class="footer"></div>
</div>