css - 自定义滚动框

Question

我正在尝试创建一个滚动框，从而可以更改箭头的形状和颜色以及文本区域的背景。

我正在尝试创建与以下相同的滚动框，但无济于事。

Answer 1

您可以为 Chrome、Opera 和 IE 的滚动条设置样式。不幸的是，Firefox 不支持它。

此外，每个浏览器引擎都使用自己的前缀和属性来设置滚动条的样式，其中一些提供的内容比其他的更多。

WebKit 示例：

::-webkit-scrollbar {
  width: 12px;
}

::-webkit-scrollbar-track {
  background: grey;
}

::-webkit-scrollbar-thumb {
  background: black;
}

网上有很多关于设置滚动条样式的资源。

底线是：
如果您想要 100% 的浏览器兼容性，请使用 JavaScript 解决方案（谷歌搜索“jquery 滚动条”）。

Answer 2

每个浏览器都使用自己的样式处理滚动条，因此更改它们并使它们在浏览器中看起来普遍相同是非常困难的。我知道这可以通过 javascript 完成，但我无法为您指明从哪里开始的正确方向。

Answer 3

好问题！

正如其他答案所述，主滚动条由浏览器设置样式和处理，因此这不是您在所有浏览器中普遍实现的。

---

然而，这里有一个很好的资源可以帮助解决这个问题，它不会产生你想要的东西，但它会给你一些很酷的滚动条。