自定义滚动框

Question

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

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

Answer 1

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

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

WebKit示例：

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

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

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

网上有大量有关滚动条样式的资源。

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

Answer 2

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

Answer 3

很棒的问题！

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

然而，虽然说有great resource here可以帮助解决这个问题，但它不能完全按照你的要求生成，但它会给你一些很酷的滚动条。