我想知道 Facebook 上的自定义滚动条是如何制作的。
它只是css还是一些javascript？
如果是，我可以知道代码的样子吗？
这个问题特定于 Facebook 滚动条样式，而不是如何简单地拥有自定义滚动条
如何在 div 上创建自定义滚动条（Facebook 风格）
IT技术
javascript
html
css
scrollbar
2021-01-30 23:23:35
4个回答
此链接应该可以帮助您入门。长话短说，一个看起来像滚动条的 div 被用来捕捉点击和拖动事件。连接到这些事件的是滚动另一个 div 内容的方法，该 div 设置为任意高度，并且通常具有溢出的 css 规则：scroll（css 规则有变体，但您明白了）。
我是关于学习经验的——但是在你了解了它的工作原理之后，我建议使用一个库（其中有很多）来完成它。这是“不要重新发明”的事情之一......
Facebook 使用了我在我的滚动条插件 jsFancyScroll 上下文中描述的非常聪明的技术：
滚动的内容实际上是由浏览器滚动机制本地滚动的，而本地滚动条通过使用溢出定义隐藏，自定义滚动条通过双向事件监听保持同步。
随意将我的插件用于您的项目：:)
https://github.com/leoselig/jsFancyScroll/
我强烈推荐它而不是像 TinyScrollbar 这样的带有可怕性能问题的插件！
如果您正在寻找类似 Facebook 的滚动条，那么我强烈建议您看看这个：
我通过添加另一个 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的高度与底角的半径相同
这是它的样子：
