溢出滚动条颜色答案

【问题标题】：Overflow scroll bar colours溢出滚动条颜色
【发布时间】：2009-10-28 21:25:53
【问题描述】：

我是 HTML 和 CSS 的新手，我正在尝试设计一个网站，其中大部分文本将在屏幕上的框中。

每个框的颜色都不同，并且包含的文本比直接可见的要多

我的问题

我可以让滚动部分的背景颜色，即两个箭头之间的位与现有的背景颜色匹配吗？

如果我什至可以改变实际滚动条的颜色，那就更好了

最后，我可以去掉水平滚动条，因为它不是必需的吗？目前它使我的盒子底部有一条白色带

【问题讨论】：

【解决方案1】：

有几种方法可以改变网站滚动条的样式：

Via CSS: 这不可靠：例如，它仅适用于 IE，而不适用于 firefox。所以我会避免这种情况。
通过 JavaScript： 我建议：隐藏浏览器滚动条并使用 javascript 和一些箭头图像制作自己的滚动条，这样您就可以完全控制样式。 例如，您可以使用 JQuery 和 JScrollPane (demo)。根据文档，这适用于所有现代浏览器（IE、Firefox ...）。如果用户禁用 javascript 支持，它仍然可以工作，但滚动条看起来没有样式。

【讨论】：

感谢您的快速回答 (1) 我有 Firefox，这是否意味着它不能或确实不应该这样做？？ (2) Java 方法是否适用于墙壁浏览器，如果适用，如何
我试图澄清我的答案。 Java 与 JavaScript 不一样！什么是墙浏览器？
谢谢一百万我会看看那些我打算指代所有浏览器的选项，即当我上传我的网站时干杯！！
@Brian 除非您是该网站的唯一受众，否则无论您只查看 IE、FF 还是 Chrome，您都必须为所有浏览器编写代码，并且正如 theomega 提到的，滚动条样式不是跨浏览器兼容的。对于 JS 版本，这适用于没有禁用 JavaScript 的任何人，它通过隐藏默认滚动条并将其替换为自定义图像/css 来工作。
他的意思是“所有浏览器”。我刚来！

【解决方案2】：

只有 quirks 模式下的 Internet Explorer 和 Opera 支持着色浏览器滚动条，因此您需要尝试使用 javascript 解决方案。

有趣的是，CSS 定义了一些system colors，因此如果您的设计（非常）灵活，您可以设置滚动区域的背景以匹配其中之一。一个不太可能的解决方案。

对于水平滚动条，你可以试试overflow-x: hidden; overflow-y: scroll。这旨在停止水平滚动但允许垂直滚动。我相信它是 CSS3，所以不太可能在所有浏览器中工作。

更新：刚刚看到这个，应该可以满足你的需求：http://www.leigeber.com/2009/09/javascript-scrollable-div/

【讨论】：