自定义我网站上的滚动条答案

【问题标题】：Customize the scroll bar on my website自定义我网站上的滚动条
【发布时间】：2011-11-10 17:08:01
【问题描述】：

我最近看到了新的 gmail 外观，并且当您有很多电子邮件时，我喜欢滚动条。如何在我的站点中复制它？

另外，我该如何从头开始，以及另一个子问题：我可以为滚动条的背景放置一个图像，例如 PNG 背景。

如何以任何方式复制它：jquery、css 等？

另外，我怎样才能让滚动条更粗，占用更多或更少的空间。

谢谢

编辑：如果为最终用户提供了一堆不同的选项/主题，是否也可以允许最终用户通过简单的表单更改大小、背景颜色等？

【问题讨论】：

你也想吃薯条吗？
@MarcB 对不起，我不知道你在说什么？
不知道为什么每个人都对这篇文章如此消极......
@JBellamy 通常，SO 要求用户具体说明他们要解决的问题。比较问题：“我已经实现了这个：X，但它看起来仍然不像 Y，我能做什么”与“请告诉我如何重新制作 Y”是不同的问题？正如你所看到的，答案正在转向解决方法的技术，因为后一种情况太宽泛，无法给出一个体面、完整的答案。通过尝试一些事情并询问您遇到的问题，而不是要求我们为您实现一个完整的功能，您会得到更好的接待。

【解决方案1】：

在某处找到类似的自定义滚动条，获取代码副本，实现并享受。

我可以为滚动条的背景放一张图片吗，例如 PNG 背景？
是的。它是 CSS+JS。

如何以任何方式复制它：jquery、css 等？
见链接。

另外，我怎样才能让滚动条更粗，占用更多或更少的空间。
通过更改 CSS。

如果为最终用户提供了一堆不同的选项/主题，是否也可以允许最终用户通过简单的表单更改大小、背景颜色等？
是的。

【讨论】：

【解决方案2】：

了解他们如何做到这一点的最简单方法是使用 firebug 来查看他们使用哪种 css 声明。

我可以看到滚动条的外观是由-webkit-scrollbar实现的：

【讨论】：